Размеры экранов у мобильных терминалов разные,особенно телефоны на Андроиде,какие то странные и странные.Есть модели разного размера,и есть в 1 раз больше экрана,в 2 раза больше экрана,и в 3 раза больше экрана.Как интерфейс для совершенства, мы надеемся найти идеальный подходит для различных моделей. rem — основная схема адаптивной компоновки мобильных терминалов.В этой статье в основном представлены принцип и общая схема rem-макета.
принцип
Прежде всего, какого адаптивного эффекта мы хотим достичь. Очень просто: размер элемента и шрифта может варьироваться в зависимости от размера экрана (как правило, относительно ширины), на больших экранах размер больше, на меньших экранах размер меньше, размер и размер пропорциональны размеру экрана.
Самое простое и прямолинейное решение — задать размер элемента напрямую в процентах. Мы можем использовать проценты, чтобы установить размер элемента для достижения адаптивного размера элемента, но он не может обеспечить адаптивный размер шрифта, и очень проблематично преобразовать размер в процентное вычисление, и трудно установить процент относительно ширины экрана. для высоты размера элемента. Проценты применяются к конкретному сценарию, а не к общему решению.
На самом деле нам нужна единица, положительно связанная с шириной экрана, и эта единица должна легко конвертироваться в px. Это позволяет нам использовать этот блок для настройки размера элемента и размера шрифта. Так существует ли такой юнит в css? Ответ таков: его не существует. . . Но не расстраивайтесь, мы можем использовать rem для получения нужной нам единицы измерения.
rem — относительная единица, 1rem равен размеру шрифта, установленному в элементе html. Мы можем изменить размер, представленный rem, если мы устанавливаем размер шрифта в html. Таким образом, у нас есть управляемая единая система отсчета. Теперь у нас две цели:
- Размер, представленный единицей rem, пропорционален ширине экрана, то есть установка размера шрифта элемента html пропорциональна ширине экрана.
- Единицы rem и px легко преобразовать, так что мы можем написать css в соответствии с рукописью аннотации.
Здесь есть предпосылка, будь то установка размера шрифта html, пропорционального ширине экрана, или преобразование единицы измерения, мы все используем наш черновик аннотации в качестве справочного материала. Черновик аннотации на мобильном терминале обычно 640px (iphone5) или 750px (iphone6/7/8).Сейчас используется больше 750px.Мы предполагаем, что черновик аннотации 750px. 750 пикселей здесь относятся к фактическому размеру устройства, а также к фактическому размеру черновика аннотации пользовательского интерфейса. Пиксель, который мы кодируем и пишем, относится к размеру css, который не зависит от устройства Размер css и фактический размер экрана не являются отношениями сопоставления 1: 1, а зависят от плотности пикселей экрана. Например, у iphoneX экран 3x, а у iphone8 экран 2x, но размер css обоих экранов составляет 375px. Фактический размер устройства, iphonex — 1125 пикселей, iphone8 — 750 пикселей, нам нужно только установить размер css в процессе кодирования, устройство автоматически поможет нам отобразить фактический размер. После того, как мы напишем страницу в соответствии с аннотацией, страница должна нормально и адаптивно отображаться на устройствах всех других размеров.
Размер, представленный единицей rem, пропорционален ширине экрана.
Прежде всего, установите размер, представленный единицей rem, пропорциональный ширине экрана.Есть 3 решения, и вам не нужно беспокоиться о значениях:
- Медиа-запрос, установите размер шрифта, соответствующий каждому экрану
@media screen and (min-width:240px) {
html, body, button, input, select, textarea {
font-size:9px;
}
}
@media screen and (min-width:320px) {
html, body, button, input, select, textarea {
font-size:12px;
}
}
// 红米Note2
@media screen and (min-width:360px) {
html, body, button, input, select, textarea {
font-size:13.5px;
}
}
@media screen and (min-width:375px) {
html, body, button, input, select, textarea {
font-size:14.0625px;
}
}
- js устанавливает размер шрифта HTML
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';
- Используйте настройку vw, vw также является относительной единицей, 100vw равно ширине экрана.
html{
font-size: 10vw;
}
Этими тремя способами размер шрифта HTML может быть установлен пропорциональным ширине экрана. Эти 3 единицы являются размерами css, независимо от первого метода.min-widthили второйdocument.documentElement.clientWidthВсе зависит от размера css устройства, и результат, полученный на iphonex и iphone8, составляет 375 пикселей.
Во-первых, необходимо установить соответствующий размер шрифта для каждого экрана, эти размеры шрифта рассчитываются по соотношению, что довольно громоздко, и некоторые размеры экрана могут быть пропущены, что не рекомендуется. Второй — использовать настройки js, что удобнее, сейчас большинство сайтов используют именно этот способ. Третий ставится vw css, что тоже очень удобно, и css писать не надо, но совместимость не очень. Рекомендуется использовать второй.
преобразование единиц измерения
Теперь мы собираемся использовать rem для установки размера элемента и размера шрифта. Есть две идеи:
- Установите специальный размер шрифта html, чтобы упростить преобразование rem и px в черновике аннотации.Например, установите размер шрифта нашего html на 1px, чтобы 1rem равнялся 1px, потому что наш черновик аннотации составляет 750px, который основан на двойном экране, 1 единица CSS равна 2 фактическим единицам, поэтому наш размер шрифта установлен на 0,5 пикселя, поэтому, когда мы устанавливаем размер, rem и px черновика аннотации отображаются 1: 1 . Разумеется, все размеры здесь указаны относительно размера отмеченной рукописи, если это размер других экранов, то размер шрифта html должен быть соответственно больше или меньше, этого можно добиться вторым методом js:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';
- Расчет в реальном времени с помощью предварительной компиляции css или плагина webpack Например, мы устанавливаем корневой элемент html в 16px, а на выноске есть элемент div шириной 100px, мы можем написать это в scss
$rem: 32rem;
div{
width: 100/$rem;
}
Плагины webpack также основаны на этом принципе расчета, напримерpx2rem
module.exports = {
// ...
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'px2rem-loader',
// options here
options: {
remUnit: 32,
remPrecision: 8
}
}]
}]
}
}