rem адаптирует макет

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

что такое адаптация

На сегодняшний день существует много типов мобильных телефонов, не говоря уже о серии iphone.Существует бесчисленное множество типов мобильных телефонов Android, поэтому невозможно написать стиль макета для каждого мобильного телефона.Сказал, конечно, чтобы найти разумное решение. rem используется для адаптивной верстки.

Адаптируйтесь к эффекту, который должен быть достигнут, как показано на следующем рисунке (простая демонстрация)

Два элемента div занимают половину экрана как на большом, так и на маленьком экранах.

Хотя описанное выше простое использование процентов может быть достигнуто, проценты не могут обеспечить адаптацию шрифта, и по-прежнему сложно преобразовать проценты в соответствующие размеры. Далее, давайте поговорим о нашем главном герое на этот раз.rem(Обычно мы подходим только по ширине)

анализ принципа рем

Во-первых, rem — это относительная единица относительно размера fontSize корневого элемента, то есть 1rem равен размеру fontSize html. Далее нам нужно только изменить fontSize элемента html, чтобы управлять размер рем. Далее, как мы адаптируемся к различным экранам, если мы достигаем, что чем больше ширина экрана, тем больше значение px, представленное 1rem, и тем больше значение fontSize HTML, то есть fontSize HTML пропорционален ширина экрана.
Давайте поговорим о некоторых концепцияхсоотношение пикселей устройства,физические пиксели устройства,Независимый от устройства пиксель(иногда также называемые виртуальными пикселями)

设备像素比 = 设备物理像素 / 设备独立像素
设备物理像素： 设备上显示的最小单位
设备独立像素： 独立于设备的用于逻辑上衡量像素的单位（css尺寸）。

Возьмем iphone6/7/8 в качестве иллюстрации, физический пиксель iphone6/7/8 равен 750, что является фактическим размером устройства, а px является независимой от устройства единицей пикселей, iphone6/7/8 в 2 раза больше экран, его размер css составляет 375, соотношение пикселей устройства уже установлено, когда устройство покидает завод.Так как же нам добиться адаптации?

Здесь используется самый популярный rem

Реализация рем

Во-первых, в соответствии с физическими пикселями устройства на разных экранах установите другой размер px от 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 and (min-width:375px) {
	html{
		font-size:14.0625px;
	}
}

Используйте экран @media и (min-width:XXX), чтобы определить размер устройства, а затем установите fontSize для html.

  • 2. js устанавливает размер шрифта html (решение NetEase)
function setRem () {
        let htmlRem = document.documentElement.clientWidth
        document.documentElement.style.fontSize = htmlRem/7.5 + 'px'
      }
setRem()

Приведенный выше код основан на iphone6 ​​в качестве черновика дизайна, и результатом является фактический пиксель 1rem = 100px, потому что соотношение пикселей устройства iphone6 ​​равно 2, поэтому 1rem составляет 50px в предварительном просмотре браузера, что означает, что соотношение между 1rem и шириной устройства составляет 7,5 раз., фактический размер изменения ширины устройства 1rem также изменится, а пропорция на экране не изменится. (Большинство решений на рынке таковы)

  • 3. Используйте vw, vh
html{
    font-size: 10vw
}

vw,vh это новая относительная единица.Он делит ширину и высоту видимой области на 100 частей,что аналогично процентной раскладке.Для этой схемы не нужно писать js,но совместимость слабовата.
Ниже прилагается таблица совместимости vw, vh

rem относится к fontSize корневого элемента, поэтому все усилия сводятся к тому, чтобы установить fontSize корневого элемента пропорционально ширине устройства.

Категории