Как элегантно использовать Flex на мобильных устройствах в 2017 году

Вне псевдонима: fullPage.js, ориентированный на мобильные устройства, уже здесь! ! !Проверить меня

Студенты, которые работали с мобильным терминалом, знают, что компоновка мобильного терминала слишком сложна, терминалов слишком много, традиционных методов компоновки недостаточно, и были изобретены различные новые методы компоновки.

До flex у традиционных макетов были макеты потока (по умолчанию), макеты с абсолютным позиционированием, гибкие макеты (em) и плавающие макеты Плавающие макеты не были разработаны для макетов и были немного громоздкими в использовании.

2009 год был необычным для фронтенда: HTML5 был доработан, выпущен es5.1, появился flex, он родился отзывчивым, родился как макет и был очень прост в использовании.

Но идеал очень богат, реальность очень тощая, flex трижды менял свои спецификации, реализации браузеров разные, и разные боги ямы, в этой статье будут обобщены лучшие практики и опыт использования flex на мобильных терминалах в 2017 году.

совместимость

В сентябре 2017 года давайте взглянем на гибкийсовместимость, можно обнаружить, что большинство из них зеленые

Красная стрелка на приведенном выше рисунке представляет браузеры, с которыми мы должны быть совместимы. В Китае нельзя игнорировать долю браузеров UC и QQ. 1 2 3 на приведенном выше рисунке фактически представляют три версии грамматики flex. Flex имеет грамматика версии 09 и версия 11. Синтаксис и стандартный синтаксис, те, у которых есть маленький желтый квадрат в правом верхнем углу, должны иметь префикс -webkit-

Подводя итог приведенному выше рисунку, условия совместимости, требуемые мобильным терминалом, следующие:

Давайте посмотрим на мобильное устройство Baidu.Статистика, соответственно Android и ios, вы можете найти, что вам нужна совместимость с Android 4.1+, IOS7+, вот данные, предоставленные Baidu, конечно, вы должны определить совместимость по статистике ваших собственных продуктов.

Подводя итог передовым практикам в этой статье, целью совместимости являются браузеры Android 4.1+, IOS7+, UC и QQ.

сравнение атрибутов

Благодаря вышеуказанным целям и возможностям легко сделать вывод, что нам нужно написать 09 и две стандартные версии грамматики, которые можно использовать только в том случае, если в обеих версиях грамматики есть атрибуты. грамматика приведена ниже Обратите внимание, что это не руководство по грамматике, грамматика Смотрите рекомендуемые материалы в конце руководства

свойства контейнера

К свойствам контейнера относятся:

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

свойства проекта

Свойства проекта включают в себя:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

PIT-опыт

Вообще говоря, пока версия 09 грамматики имеет соответствующие функции, ее можно использовать, но на мобильном терминале все еще есть некоторые ямки, которые делают некоторые атрибуты непригодными для использования.

justify-content: space-around нельзя использовать, старый синтаксис этого не делает, но его можно имитировать с помощью пробела между + заполнение контейнера

flex-wrap: wrap нельзя использовать, а соответствующий старый синтаксис box-lines: mutiple не поддерживается большинством браузеров, что означает, что он не может выполнять перенос

Когда встроенный элемент uc span используется в качестве дочернего элемента, отображение должно быть установлено на блок, лучше всего использовать элементы уровня блока напрямую.

настоящий бой

Сказав так много, давайте дадим стандартный способ записи, свойство flex должно быть написано так

webkit前缀09版
webkit前缀标准版
标准版

Например, display: flex следует писать так

display: -webkit-box; 
display: -webkit-flex; 
display: flex; 

Некоторые студенты должны сказать, что это слишком хлопотно, есть ли какое-нибудь простое решение? Есть правда, есть три пути, слава предшественникам

Первый, плагин редактора, имеет плагин под названием autoprefix, который может быть установлен возвышенным, Вам нужно только написать стандартные свойства, а затем нажать клавишу быстрого доступа, чтобы автоматически заполнить свойства префикса. Этот метод самый простой в использовании, но его будет непросто поддерживать в будущем.Например, как однажды сломать версию 09 грамматики? ? ? Измените его один за другим, о (╯□╰) о

Второй — миксин препроцессора. Если вы использовали less или sass, вы должны знать миксин. В качестве примера ниже используется less 2.x, и sass аналогичен.

.display-flex(@display: flex) {
    & when (@display=flex) {
        display: -webkit-box;
    }
    & when (@display=inline-flex) {
        display: -webkit-inline-box;
    }
    display: e("-webkit-@{display}");
    display: @display;
}

.flex-direction(@direction) {
    & when (@direction=row) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
    }
    & when (@direction=row-reverse) {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
    }
    & when (@direction=column) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
    }
    & when (@direction=column-reverse) {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
    }
    -webkit-flex-direction: @direction;
    flex-direction: @direction;
}

.flex-wrap(@wrap) {
    & when (@wrap=nowrap) {
        -webkit-box-lines: single;
    }
    & when (@wrap=wrap) {
        -webkit-box-lines: multiple;
    }
    -webkit-flex-wrap: @wrap;
    flex-wrap: @wrap;
}

.justify-content(@justify-content) {
    & when (@justify-content=flex-start) {
        -webkit-box-pack: start;
    }
    & when (@justify-content=flex-end) {
        -webkit-box-pack: end;
    }
    & when (@justify-content=center) {
        -webkit-box-pack: center;
    }
    & when (@justify-content=space-between) {
        -webkit-box-pack: justify;
    }
    -webkit-justify-content: @justify-content;
    justify-content: @justify-content;
}

.align-items(@align-items) {
    & when (@align-items=flex-start) {
        -webkit-box-align: start;
    }
    & when (@align-items=flex-end) {
        -webkit-box-align: end;
    }
    & when (@align-items=center) {
        -webkit-box-align: center;
    }
    & when (@align-items=baseline) {
        -webkit-box-align: baseline;
    }
    & when (@align-items=stretch) {
        -webkit-box-align: stretch;
    }
    -webkit-align-items: @align-items;
    align-items: @align-items;
}

.order(@order) {
    -webkit-box-ordinal-group: @order;
    -webkit-order: @order;
    order: @order;
}

.flex(@flex) {
    -webkit-box-flex: @flex;
    -webkit-flex: @flex;
    flex: @flex;
}

Просто используйте одну строку

.container {
    .display-flex;
    .flex-direction(row);
    .justify-content(center);
}

Результат приведенной выше компиляции без кода выглядит следующим образом

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

Некоторые одноклассники говорят, что это так хлопотно, не хочется писать? На самом деле, кто-то уже должен был это написать, напримерcompass, вы можете обратиться к

Суть этого метода в том, что использовался препроцессор CSS, а ремонтопригодность лучше, чем у первого способа, но по моему опыту, на самом деле миксины большинства проектов могут кем-то не поддерживаться, например, может не поддерживаться один день.Требуется префиксная версия, но кто-то не будет ее обновлять

Третий - это постпроцессор css.По сути, с тех пор, как вышел postcss, работу по автоматической префиксации следует оставить на postcss. С этим плагином нам нужно только настроить совместимую версию браузера. Постпроцессор автоматически решает это для вас. Недавно Babel также выпустил аналогичный babel-env

Плагин fis-postprocessor-autoprefixer можно использовать в fis. В моей предыдущей статье "Сводная информация об опыте пересмотра страницы шагов по беспроводной связи"введен в

можно использовать в вебпакеpostcss-loaderэтот загрузчик

Наконец-то я могу играть с префиксами браузера ^_^

Чтобы немного популяризировать научные знания, лаборатория, стоящая за CSS, больше не будет иметь префикс, а будет отображаться через метод настройки браузера, чтобы открыть экспериментальные свойства, потому что метод префикса недостаточно элегантен. . . В этом горшке в основном обвиняют разработчиков интерфейса, потому что мы пишем только префикс webkit, а не стандартные атрибуты, o(╯□╰)o

Суммировать

Я надеюсь, что эта статья поможет вам лучше использовать flex и меньше наступать на некоторые ямы.Теперь вы можете использовать flex произвольно на мобильной стороне, но не на стороне ПК, т.е.8. . . Если нет проблем с совместимостью, тогда приходите и используйте этот простой в использовании макет.

Наконец, я настоятельно рекомендую всем прочитать книгу Учителя Да Мо».Графический CSS3", это лучшая книга о CSS3, которую я когда-либо видел.

Релевантная информация

• Учебное пособие по гибкому макету: синтаксис
• Учебное пособие по Flex Layout: примеры

Исходный URL:http://yanhaijing.com/css/2016/08/21/flex-practice-on-mobile/

Добро пожаловать, чтобы подписаться на мою общедоступную учетную запись WeChat, отправляйте только оригинальный текст. Сканировать или искать:Ян Хайцзин