предисловие
С течением времени мобильный телефон есть практически у каждого. Мне, как программисту фронтенд-разработки, при разработке мобильных веб-приложений перед кучей экранов разного цвета и размера становится немного грустно.
Очевидно, чего мы хотим добиться, так это добиться эффекта на визуальной карте пользовательского интерфейса на стольких вышеупомянутых экранах. Для достижения этого эффекта есть две основные трудности
- Адаптируйтесь к каждому экрану
- Обработка деталей под экраном Retina (в основном проблема 1px)
Адаптируйтесь к каждому экрану
Есть два варианта адаптации каждого экрана,flexible + remа такжеvw. Что означают эти три слова, кажется знакомым, но что это за два решения, позвольте мне подробно объяснить.
flexible + rem
Очевидно, что схема состоит из рем и гибкости. rem (размер шрифта корневого элемента) является кратным вычисленного значения размера шрифта относительно корневого элемента (т.е. элемента html), а flexible — это flexible.js, библиотека, предоставленная командой Hand Taoist для экранной адаптации этого решение. Основная функция заключается в установке соответствующего значения размера шрифта для элемента html в соответствии с шириной экрана.
Я не знаю, как это увидеть, не так ли? Позвольте мне повторить это со сценарием страницы.
При нормальных обстоятельствах наш пользовательский интерфейс примет размер iphone6 в качестве стандарта, создаст набор изображений с визуальным эффектом и пометит их на нем, а также предоставит нам изображение разметки, как показано ниже.
Как мы начнем с этой картины?
- Сначала устанавливаем размер шрифта элемента html, мы временно устанавливаем это значение в font-size: 37,5px, то есть 1rem = 37,5px;
- Возьмем для примера iphone6, у него ширина экрана 750px, ширина всего экрана 20rem = 37.5*20px = 750px;
- В настоящее время поле ввода номера мобильного телефона имеет размер 490px = 13,06777777rem.
- Преобразуйте px на странице в rem по очереди, чтобы мы получили страницу с rem в качестве единицы размера.
Это конец? Мне жаль говорить вам, что это не так. Почему размер шрифта html-элементов установлен на 37,5 пикселей? Теперь этот интерфейс отлично отображается на iphone6, может ли он идеально отображаться на iphone5s и iphone6p? (iphone6, iphone6s, iphone7. Экран iphone8 не изменился, эта статья напрямую заменена на iphone6.) Мы еще не решили две вышеуказанные проблемы, и настала очередь гибкости. Его нужно только ввести следующим образом, чтобы использовать js для автоматической установки значения размера шрифта элемента html в соответствии с шириной экрана.
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
продлить его
В ходе описанного выше процесса вы обнаружите, что пользовательский интерфейс дает нам карту метки PX, мы конвертируем ее в REM, что требует много времени для расчета. Как квалифицированный программист, мы должны реализовать эту механическую мозговую операцию на компьютере. Я использую плагин POSTCSSpostcss-px2rem, Этот плагин позволяет нам писать px непосредственно при написании кода и автоматически преобразовывать px, которые мы пишем, в rem при сборке, что значительно повышает эффективность нашей разработки.
vw
Эта схема vw довольно новая. vw - (ширина области просмотра) ширина видимого окна. Причина, по которой это решение отложено, заключается в том, что в прошлом году (2017) у окна просмотра было много проблем с совместимостью, а поддержка различных браузеров была не очень хорошей. Но на данный момент в 2018 году просмотры вьюпортов поддерживаются многими браузерами (80,45 %).
Давайте поближе познакомимся с этой программой. Поскольку vw — это единица размера, какова его ширина? Равен 1% от ширины всего экрана. Например, снова взяв в качестве примера iphone6, 100vw = 750px => 1vw = 7,5px
Еще раз, последний интерфейс является демонстрацией
- По определению мы понимаем, что на телефоне iphone6 1vw = 7.5px
- В настоящее время поле ввода номера мобильного телефона имеет размер 490px = 65,333333vw.
- Преобразуйте px на странице в vw по очереди, чтобы мы получили страницу с vw в качестве единицы размера.
Это конец? Да, это так просто.
продлить его
Та же проблема, что и раньше, нам по-прежнему нужно тратить много ненужного вычислительного времени, чтобы преобразовать px в изображении аннотации в vw.Есть ли инструмент, похожий на postcss-px2rem? Это честь снова стоять на плечах гигантов, некоторые великие боги написали подобные плагины для PostCss.postcss-px-to-viewport
1px проблема
Экран мобильной стороны - это не только разница в разрешении, но и проблема с экраном Retina. При нормальных обстоятельствах 1px в нашем коде должен отображать точку пикселя на экране, но на экране Retina это не просто точка пикселя. Возьмем снова iPhone 6 в качестве примера.DPR (Device Pixel Ratio) пиксель устройства равен 2, точка 1x1 в CSS, на самом деле iPhone6 это точка 2x2, а граница 1px отображается на экране сетчатки DevicePixelratio = 2.2px, даже под iPhone6 Plus будет даже 3px.
В этом случае мы обнаружим, что толщина 1px на некоторых мобильных телефонах явно отличается от толщины 1px на других мобильных телефонах. На самом деле, большинство небольших компаний не будут вычитать такую деталь, например, наша компания не будет. (^__^) Ух……
Но как начинающий фронтенд-инженер, мы должны стараться изо всех сил, чтобы все было идеально (ps. Как и в крупной компании, в большой компании нельзя игнорировать эту проблему с деталями. Для нашего будущего развития нам необходимо завершить эту деталь. )
Есть много решений этой проблемы, и я лично думаю, что самое простое из них — это решение Да Мо Да. использоватьpostcss-write-svgплагин,
@svg 1px-border {
height: 2px;
@rect {
fill: var(--color, black);
width: 100%; height: 50%;
}
}
.example {
border: 1px solid transparent;
border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}
Скомпилировано
.example {
border: 1px solid transparent;
border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}
разное
Апплет экранной адаптации
Недавно я пишу небольшую программу.В маленькой программе я использую набор малых программ, который отличается от обычного ведра семейства vue и ведра семейства React.Webpack не настроен.В этом случае это на самом деле очень сложно для нам использовать postcss (я все равно не могу понять/(ㄒoㄒ)/~~)
Итак, что мне делать?Апплет предоставляет собственную единицу измерения, rpx (отзывчивый пиксель): он может быть адаптивным в зависимости от ширины экрана. Указанная ширина экрана составляет 750 пикселей. Например, на iPhone6 ширина экрана составляет 375 пикселей и 750 физических пикселей, поэтому 750rpx = 375px = 750 физических пикселей, 1rpx = 0,5px = 1 физический пиксель.
| оборудование | rpx в px (ширина экрана/750) | px в rpx (750/ширина экрана) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6p | 1rpx = 0.552px | 1px = 1.81rpx |
Мы напрямую используем карту аннотаций, полученную от iphone6, просто пишем rpx напрямую. здорово👍
Суммировать
Если вы внимательно посмотрите, то обнаружите, что предыдущая схема rem на самом деле является симуляцией схемы реализации vw, и между ними есть много общего. существуетlib-flexibleНа гитхабе есть такое предложение.
Поскольку блок просмотра совместим со многими браузерами, от схемы перехода lib-flexible можно отказаться, будь то текущая версия или предыдущая версия, есть определенные проблемы. Рекомендуется начать использовать видовые экраны вместо этого решения. Чтобы узнать о совместимом решении vw, обратитесь к статье «Как использовать vw для реализации мобильной адаптации в проекте Vue».
Мы можем получить четкое сообщение о том, что решение lib-flexible было заброшено, и мы можем принять решение реализации vw.
Эта статья ссылается на многие статьи Да Мо Да на сайте www.w3cplus.com.