Как использовать vw+rem для мобильной верстки

внешний интерфейс JavaScript CSS

предисловие

Потому что в компании есть только один фронтенд при мобильной верстке. При использовании px для макета обнаружено, что требуются различные адаптации мобильных телефонов. Так вот, когда я разрабатывал вторую редакцию, я подумал о том, чтобы привести библиотеку lib-flexible (то есть решение ручного поиска), и спросил у коллег из предыдущей компании, будут ли какие-то шрифты и какие-то странные вопросы. По невнимательности один пользователь сети вдруг сказал мне, что у него есть очень полезная схема адаптации. использоватьvw+rem. Послушав, как он анализирует это, я чувствую себя довольно хорошо, поэтому я осмеливаюсь попробовать.

согласно сСпецификация CSS3, единица области просмотра в основном включает следующие 4 элемента:

  • vw : 1vw равно 1% ширины области просмотра
  • vh : 1vh равен 1% высоты окна просмотра
  • vmin : выберите наименьший из vw и vh
  • vmax : выберите наибольший из vw и vh

Измеряется в единицах области просмотра, ширина области просмотра составляет 100vw, а высота — 100vh (левая сторона в книжной ориентации, правая — в альбомной).

Например, размер области просмотра десктопного браузера составляет 650 пикселей, тогда 1vw = 650 * 1% = 6,5 пикселей (это теоретический расчет, если браузер не поддерживает 0,5 пикселей, фактический результат рендеринга может быть 7 пикселей).

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

Используйте приемлемые единицы, чтобы соответствовать странице

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

Что касается основного адаптивного макета и гибкого макета, макет, реализованный Media Queries, требует настройки нескольких адаптивных точек останова, и этот опыт также очень неудобен для пользователей: сохраняется разрешение макета в пределах диапазона адаптивных точек останова. Не только, но и в момент реагирования на переключение брейкпойнтов раскладка вызывает трансформацию переключения сплит-типа, как кассетный проигрыватель "щелкает" одну за другой.

Благодаря эластичной динамической расчетной единице макета rem, встроенной в заголовок скрипта, необходимо изменить динамическое изменение разрешения монитора корневого элемента размера шрифта, чтобы CSS в JS соединился вместе.

Есть ли способ решить такую ​​проблему?

Ответ — да, используя подходящие блоки для создания адаптивных страниц, можно не только решить проблему ошибок отклика, но и решить проблему зависимости от сценариев.

Использование основано на iPhone6 ​​(750)

Первый шаг Вообще говоря, я установлю метатег на мобильном терминале.

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">

Потому что dpr у iPhone6 ​​и у большинства из них 2, он конвертируется для удобства второго шага

Второй шаг - установить размер шрифта для тела и html.

html {
    font-size: 13.3333333333333vw // 设计图100px，浏览器根据缩放为 50px
}

13.3333333333333vw почему?

100 / 750 = 0.133333333333333vw

Мы принимаем этот кусок за 100 пикселей, а затем делим его на 750, чтобы получить 1 пиксель = 0,133333333333333vw.

Тогда вся вкусовая привлекательность равна 0,1333333333333333 * 100 = 13,3333333333333vw = 100px

В итоге 100px = 1rem (100px на дизайн, и 50px на браузер по зуму)

Благодаря этому преобразованию мы используем vw для преобразования rem в 100 пикселей на основе дизайна.

Совет: (Размер изображения 100 пикселей, размер браузера увеличен до 50 пикселей)

Тогда это может быть хорошо использовано в проекте

div {

     // width: 设计图100px，实际浏览器根据缩放为 50px; 
     width: 1rem; 
}

span {
    height: .12rem
}

Проекты, которые уже воспользовались программой и запустили

Этот проект разработан мной, технология немного шлаковая, пожалуйста, потерпите меня

Категории