Примечание редактора: в мобильном терминале rem используется для изменения относительно корневого HTML. После периода JS мобильный терминал становится адаптивным. В этой статье для самоадаптации используются чистые блоки окна просмотра CSS, хотя текущая совместимость не Это можно принять, но это не мешает вам осознать силу vw и vh.
Реализация адаптивного макета зависит от медиазапросов.Выбор ширины и размера основных устройств в качестве контрольных точек для написания дополнительных стилей для адаптации, но это будет более проблематично, и его можно использовать только на нескольких выбранных основных размерах устройств.Идеально подходит ниже.
Даже если адаптация достигается за счет rem единиц, необходимо встроить скрипт для динамического расчета размера корневого элемента.
В последние годы, когда мобильная поддержка единиц области просмотра стала более зрелой и обширной, мы можем попробовать новый подход, чтобы действительно адаптироваться ко всем размерам устройств.
Распознавать единицы просмотра
Во-первых, нам нужно понять, что такое окно просмотра.
В отрасли очень уважаемой теорией является объяснение области просмотра, предложенное Питером-Полем Кохом (называемым «Богом PPK» в реках и озерах). браузер на десктопной стороне; на мобильной стороне все сложнее, он включает в себя три окна просмотра, а именно:Окно просмотра макета,Визуальное окно просмотра,Ideal Viewport
«Вьюпорт» в блоке вьюпорта на десктопной стороне, несомненно, относится к видимой области браузера, но на мобильной стороне он относится к трем вьюпортам.Layout Viewport.
согласно сcss спецификация, единица области просмотра в основном включает следующие 4 элемента:
- vw: 1vw равно 1% ширины области просмотра
- vh: 1vh равен 1% высоты области просмотра
- vmin: выберите vw и vh наименьшее из
- vmax: выберите наибольшее из vw и vh
Единица области просмотра отличается от единицы %, единица измерения области просмотраЗависит от размера области просмотра, который определяется как процент от размера области просмотра; единица измерения % зависит от предков элемента.
Измеряется в единицах области просмотра, ширина области просмотра составляет 100vw, а высота — 100vh (левая сторона в книжной ориентации, правая — в альбомной).
Например, если размер области просмотра настольного браузера составляет 650 пикселей, то 1vw = 650 * 1% = 6,5 пикселей (это теоретический расчет, если браузер не поддерживает 0,5 пикселей, фактический результат рендеринга может быть 7 пикселей).
совместимость
Как показано на фиг.1, известно, что есть совместимость: мобильная сторона поддерживает ios8 выше, Android 4.4 и выше, а также идеальная поддержка полнобуквенного микроядра x5.
Используйте единицы области просмотра, чтобы соответствовать размеру страницы
Для разработки мобильного терминала наиболее важным моментом является то, как адаптировать страницу для достижения совместимости с несколькими терминалами.Различные методы адаптации имеют свои преимущества и недостатки.
Что касается основного адаптивного макета и гибкого макета, макет, реализованный Media Queries, требует настройки нескольких адаптивных точек останова, и этот опыт также очень неудобен для пользователей: макет поддерживается с разрешением в пределах диапазона адаптивных точек останова. остается неизменным, но в момент реакции на переключение точки останова раскладка вызывает сбоеподобное изменение, подобно тому, как кассетный проигрыватель «щелкает» снова и снова.
При использовании эластичного макета динамического расчета единиц rem необходимо встроить в голову скрипт для отслеживания изменения разрешения для динамического изменения размера шрифта корневого элемента, чтобы CSS и js были связаны вместе.
Есть ли способ решить такую проблему?
Ответ: да, используя блок просмотра для реализации адаптивной страницы, это навык для решения проблемы адаптивной ошибки, и он также может решить проблему, начиная со сценария.
Практика 1: Используйте только vw в качестве модуля css
В соответствии с практикой использования только vw в качестве единственной единицы CSS мы придерживаемся:
- Для преобразования размера эскиза проекта в единицы vw мы используем функцию Sass для компиляции
// iPhone 6 尺寸作为设计稿基准
$vw_base: 375px;
@function vw($px) {
@return ($px / $vw_base) * 100vw;
}
- Используйте vw в качестве единицы CSS как для текста, так и для ширины макета, интервалов и т. д.
.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vw(15) vw(10) vw(10); // 内间距
&_item {
flex: 1;
text-align: center;
font-size: vw(10); // 字体大小
&_logo {
display: block;
margin: 0 auto;
width: vw(40); // 宽度
height: vw(40); //高度
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vm(2);
}
}
}
}
- Линия физического пикселя в 1 пиксель (то есть 1 пиксель на обычном экране и 0,5 пикселя на экране с высоким разрешением) реализована с использованием шкалы атрибута преобразования.
.mod_grid {
position: relative;
&::after {
// 实现1px的下边框线
content: '';
position: absolute;
z-index: 1;
pointer-events: none;
background-color: #ddd;
height: 1px;
left: 0;
right: 0;
top: 0;
@media only screen and ()
}
}
- Для графиков, которые должны поддерживать соотношение сторон, вместо этого следует использовать padding-top.
.mod_banner {
position: relative;
padding-top: percentage(100/700); // 使用padding-top
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}
Исходя из этого, мы можем добиться эффекта страницы общего макета следующим образом:
Адрес опытакликните сюда
Практика 2: с vw и rem компоновка более оптимизирована
Хотя такая страница выглядит хорошо, вы обнаружите, что, поскольку она использует единицы области просмотра для достижения макета, она автоматически масштабируется в зависимости от размера области просмотра.Независимо от того, слишком велика или слишком мала область просмотра, она также масштабируется вместе с областью просмотра. Если он слишком велик или слишком мал, он теряет ограничение максимальной и минимальной ширины.
Конечно, вас не волнует такой маленький недружественный пользовательский опыт, но давайте попробуем исправить такой маленький недостаток.
Итак, я думаю, что лучше объединить блок rem для реализации макета? Суть rem elastic layout заключается в динамическом изменении размера корневого элемента, после чего мы можем пройти:
- Установите размер корневого элемента в блоках VW, которые изменяются с помощью просмотра, чтобы он мог динамически изменить его размер.
- Ограничьте максимальный и минимальный размер шрифта корневого элемента, с телом плюс максимальная ширина и минимальная ширина
Таким образом, мы можем реализовать максимальные и минимальные ограничения на ширину макета. Следовательно, по вышеизложенным условиям можно сделать вывод, что кодовая реализация выглядит следующим образом:
// rem 单位换算： 定位75px 只是方便运算， 750-75px、 640-64px、 1080-108px， 如此类推
$vw_fontsize: 75; // iPhone6 尺寸的根元素大于基准值
@function rem($px) {
@return ($px / $vm_fontsize) * 1rem;
}
// 根元素大小使用vw单位
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同时，通过Media Queries 限制根元素最大值，最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width:540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认100%宽度的block元素跟随body而过大过小
body {
max-width: 540px;
min-width: 320px;
}
Скриншоты здесь не приводятся, но вы можетеЩелкните здесь для онлайн-адресаопыт.
резюме
По сравнению с первым методом я лично предпочитаю второй метод по следующим двум причинам:
Во-первых, на практике 2 визуальный опыт пользователя относительно лучше, а ограничения максимальной и минимальной ширины увеличены;
Во-вторых, что более важно, если в качестве метода адаптации страниц для разработки проекта выбран основной метод гибкой верстки rem, то второй метод больше подходит для перехода от модулей rem к модулям vw в более поздних проектах. Просто изменив метод расчета размера корневого элемента, вы можете плавно перейти к другому блоку CSS без какой-либо другой обработки, не говоря уже о том, что использование блока vw неизбежно станет лучшим методом адаптации. В настоящее время он широко не используется. из-за поддержки совместимости.
послесловие
Это я случайно прочитал[Перевод] Настоящая плавная типографика с VH и VWМысли и результаты, полученные из этой статьи, я также надеюсь, что эта статья также вдохновит читателей и предложит несколько советов по использованию устройств vw для общения~:)
Эта статья воспроизводится. Оригинал: Bump LabBump.IO/notes/2017/…