возобновить: Спасибо за напоминание из области комментариев, я обнаружил, что использование идеи макета rem изначально было представлено гибким решением команды даосских рук. Вы можете читать эту статью случайно или нет. Для действительно технического содержания, пожалуйста, прочитайте:Использование Flexible для реализации терминальной адаптации страниц H5 Taobao,Поговорим об адаптации мобильных страниц.
Это должен быть относительно распространенный метод использования rem для адаптации изображения на мобильном терминале.Недавно я столкнулся с интересной (и странной) проблемой совместимости на работе. Настоящим запоминается, а также разбирается идея использования rem адаптации, а также небольшая хитрость по использованию sass-функции ( ✪ω✪ ).
рем против эм
И rem, и em являются относительными единицами, основанными на размере шрифта в CSS.Разница между ними заключается в том, что em использует размер шрифта текущего элемента для определения фактического размера, а использование rem основано на размере шрифта корневого узла html.
Использование EM на самом деле раздражает, например, родительский элемент и дочерние элементы соответственно.font-sizeустановить значение, например1.2em, предполагая, что размер шрифта, унаследованный родительским элементом, изначально равен 10px, после применения стиля размер шрифта родительского элемента становится 12px, а дочернего элемента — 14,4px. В коде влияние размера одного и того же письма может быть везде разным. Вполне возможно, что если em используется часто, то легко сделать код запутанным и трудным для понимания, поэтому программисты не будут использовать его очень часто.
Напротив, rem показывает некоторое единство. Поскольку это зависит только от размера шрифта корневого узла html, любой2remОба определенно в 2 раза больше корневого элемента, никаких «сюрпризов» при использовании em .
Используйте rem, чтобы нарезать
Это простой и грубый, но очень удобный метод экранизации. Уведомление,Предпосылка заключается в том, что нет ограничений на высоту страницы., то есть этот метод адаптации может адаптироваться только к изменениям ширины экрана, если же необходимо адаптироваться еще и к высоте всего экрана, просто использовать rem может быть невозможно.
Проще говоря, дизайнер при рисовании использует определенный размер модели, например iphone6. При нарезке картинки мы сначала полностью следим за размером пикселя в чертеже конструкции, а симулятор устройства хрома тоже настроен на вид iphone6.
В результате, если вы переключитесь на другую ширину экрана мобильного телефона или устройство будет расположено в альбомной ориентации, возникнет проблема загроможденности макета.
преобразование единиц измерения
Следующий шаг — использовать всеpxединиц, которые равномерно переводятся вremединиц (методы см. ниже). Размер шрифта html по умолчанию для веб-просмотра iphone6 составляет 16 пикселей, поэтому, если элемент в CSS имеет ширину 32 пикселя, он будет преобразован в 2rem и так далее. Ширина экрана iphone6 составляет 375 пикселей, при условии, что элемент div занимает половину ширины экрана, исходный CSSwidth: 187.5px, то после преобразованияwidth: 11.71875rem, сохраняя исходный размер.
Но вы должны обнаружить, что хотя сейчас используется макет rem, переключение на экран с другой шириной не гарантирует, что div по-прежнему будет занимать половину ширины экрана. Например, телефон Pixel2 в эмуляторе устройства Chrome имеет ширину 411 пикселей, а размер шрифта html по умолчанию — 16 пикселей. В это время оригиналwidth: 11.71875remРасчетная фактическая ширина составляет только половину ширины экрана iphone6 (187,5 пикселей), а не половину ожидаемой ширины экрана Pixel2 (205,5 пикселей).
Следующий шаг — ключ к идее адаптации rem: настройка размера шрифта элемента html.
Отрегулируйте размер шрифта html-элементов
Если вы хотите идеально переключить эффект макета на iphone6 на Pixel2, вам нужно сделать каждый элемент пропорционально увеличенным, а кратное411 / 375. Все единицы измерения основаны на rem, который основан на размере шрифта html-элемента. Пусть размер шрифта html будет увеличен прямо на это соотношение, скоро все элементы можно будет увеличивать одновременно?
Итак, когда страница загрузится, добавьте следующий код:
var count = 23.4375;
document.documentElement.style.fontSize = document.documentElement.clientWidth / count + 'px';
Счетчик в коде рассчитывается из ширины экрана iphone6, деленной на размер шрифта по умолчанию:375 / 16. То есть, при ширине экрана iphone6 можно разместить количество текстов по умолчанию.
После запуска кода это эквивалентно установкеPixel2 fontSize *= (Pixel2 width / iphone6 width).
Или другой способ понимания: после установки размера шрифта ширина экрана может вместить количество шрифтов, то есть ширина экрана становитсяcount rem. Если вы используете 2rem в качестве ширины элемента, то этот элемент занимает весь экран.2 / count, соотношение одинаково для любой ширины устройства.
С изменением размера шрифта по умолчанию в html теоретически можно без проблем использовать единицы rem для макета. Макет, который вы видите на любом экране, является эффектом пропорционального масштабирования макета на iPhone 6.
Наконец, выполняется привязка событий для изменения размера окна, а размер шрифта сбрасывается при изменении размера окна. Таким образом, макет может адаптироваться к изменениям размера экрана при повороте экрана.
У меня проблемы с совместимостью
rem хорош, но обратите внимание на детали его использования. Например, недавно я столкнулся со странным явлением хаотичного расположения. Появляется в гибридных приложениях Android, которые являются встроенными компонентами веб-просмотра в нативные приложения.
Эта проблема не воспроизводится на 100% в начале. Когда веб-просмотр время от времени открывается на некоторых мобильных телефонах, макет интерфейса будет хаотичным. Конкретная производительность заключается в том, что все текстовые элементы исчезают, оставляя только изображения, которые заполняют ширину экрана от сверху вниз. После тщательного исследования я наконец обнаружил проблему с размером шрифта элемента html: на самом деле он равен 0.
Проверьте еще раз и обнаружите, что проблема исходит отdocument.documentElement.clientWidth.
Когда некоторые мобильные телефоны открывают веб-просмотр, clientWidth элемента html сначала не имеет значения, в результате чего код устанавливает размер шрифта html равным 0. Тогда ошибка компоновки неизбежна. Что касается того, почему изображение все еще может отображаться, это потому, что процент используется для установки размера изображения в макете.Если вы также используете rem для установки размера изображения, изображение также исчезнет.
Хотя проблема позиционирования потребовала много работы, ее все же очень легко решить, просто используйте совместимый метод записи, чтобы получить ширину экрана:
var width = document.documentElement.clientWidth
|| document.body.clientWidth || window.innerWidth;
document.documentElement.style.fontSize = width / count + 'px';
Применение функции sass
Как упоминалось ранее, вам необходимо преобразовать единицы измерения px в единицы CSS в единицы rem. Обычной практикой является настройка загрузчика в веб-пакете, автоматическое соответствие единице px в процессе компиляции, а затем преобразование в соответствии с установленным соотношением.
На самом деле, если проект использует sass (обычно используется scss, который ближе к нативному синтаксису CSS) вместо CSS, есть более изящный способ: использовать функцию sass.
Определите функцию преобразования размера следующим образом:
@function rem($size) {
@return $size / 16 * 1rem;
}
При использовании напрямую используйте эту функцию, чтобы записать значение в единицах px, которые могут быть автоматически преобразованы в единицы rem:
.foo {
width: rem(20);
}
Использованная литература:код спрей.IO/возле эл рычаг сам…