Сегодня существует множество типов мобильных телефонов, не говоря уже о серии iPhone, существует бесчисленное множество типов телефонов Android, поэтому невозможно написать набор стилей раскладки для каждого мобильного телефона. Это тоже невозможно, но для интерфейсов. которые все больше стремятся к совершенству Говорят, конечно, чтобы найти разумное решение. rem используется для адаптивной верстки.
Эффект, которого необходимо достичь путем адаптации, показан ниже (простая демонстрация).
Два элемента div занимают половину экрана независимо от того, находятся ли они на большом или маленьком экране.
Хотя вышеупомянутое простое использование процентов может быть достигнуто, проценты не могут обеспечить адаптацию шрифта, и все еще сложно преобразовать проценты в соответствующие размеры. Далее, на этот раз давайте поговорим о нашем главном герое Реме (обычно мы адаптируемся только к ширине)
анализ принципа remПрежде всего, rem — это относительная единица относительно размера FontSize корневого элемента, то есть 1rem равен размеру FontSize HTML. Далее нам нужно только изменить размер шрифта элемента html, чтобы контролировать его. размер бэр. Далее, как нам адаптироваться к различным экранам, если мы гарантируем, что чем больше ширина экрана, тем больше значение px, представленное 1rem, и тем больше значение fontSize в HTML. Другими словами, размер шрифта HTML должен быть пропорциональным. по ширине экрана.
Давайте поговорим о некоторых понятиях: соотношение пикселей устройства , физические пиксели устройства , независимые от устройства пиксели (иногда их также называют виртуальными пикселями).
Соотношение пикселей устройства = физические пиксели устройства/пиксели, независимые от устройства.
Физический пиксель устройства: наименьшая единица измерения, отображаемая на устройстве.
Независимые от устройства пиксели: независимые от устройства единицы, используемые для логического измерения пикселей (размеры CSS).
Возьмем, к примеру, iphone6/7/8. Физические пиксели iphone6/7/8 равны 750, что соответствует фактическому размеру устройства, а px — это независимая единица пикселей устройства, равная 2x. screen и его размер CSS составляет 375, соотношение пикселей устройства уже установлено, когда устройство покидает завод. Так как же нам добиться адаптации?
Здесь используется самый популярный rem
План реализации РемВо-первых, в соответствии с физическими пикселями устройства на разных экранах с помощью FontSize элемента html необходимо установить разные размеры в пикселях.
1. Запрос СМИ
html{font-size:16px;}@media screen and (min-width:240px) { html {font-size:9px; }}@media screen and (min-width:320px) {html {font-size:12px; ;}}@media screen и (минимальная ширина: 375 пикселей) {html{font-size: 14.0625 пикселей;}}Используйте экран @media и (min-width:XXX), чтобы определить размер устройства, а затем установите размер шрифта html.
2. js устанавливает размер шрифта html (решение NetEase)
function setRem () { let htmlRem = document.documentElement.clientWidth document.documentElement.style.fontSize = htmlRem/7.5 + 'px' }setRem()Приведенный выше код основан на iphone6 в качестве чернового варианта дизайна, и в результате получается фактический пиксель 1rem = 100 пикселей. Поскольку соотношение пикселей устройства iphone6 равно 2, 1rem составляет 50 пикселей в предварительном просмотре в браузере, что означает, что соотношение между 1 rem и шириной устройства составляет 7,5 раз, фактический размер изменится, если ширина устройства изменится на 1 rem, а пропорции на экране не изменятся. (Большинство решений на рынке именно такого типа)
3. Используйте vw, vh
html{размер шрифта: 10vw}vw и vh — новые относительные единицы, которые делят визуальную область на 100 частей по ширине и высоте, аналогично процентному макету. Это решение не требует написания js, но совместимость немного плохая.
Ниже прикреплена таблица совместимости vw и vh.
Каждый rem относится к размеру шрифта корневого элемента, поэтому все усилия заключаются в том, чтобы установить размер шрифта корневого элемента, пропорциональный ширине устройства.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.