詳解rem 適配布局

2024-08-26 00:21:07

字體：大中小

供稿：網(wǎng)友

當(dāng)今手機(jī)種類繁多且不說(shuō)iphone系列，安卓手機(jī)的種類已經(jīng)數(shù)不勝數(shù)了，所以不可能每一款手機(jī)都要寫一套布局樣式，這也是不可能做到的，但是對(duì)于越來(lái)越精益求精的前端來(lái)說(shuō) ，當(dāng)然要找到一個(gè)合理的解決方案。rem 就是用來(lái)自適應(yīng)布局的。

適配要達(dá)到的效果，如下圖（簡(jiǎn)單的示范一下）

rem,適配,布局

兩個(gè)div不論在大屏還是小屏上都是占據(jù)屏幕的一半

雖然上面這種簡(jiǎn)單的使用百分比可以實(shí)現(xiàn)但是，百分比無(wú)法實(shí)現(xiàn)字體的自適應(yīng)，百分比轉(zhuǎn)換成相應(yīng)的尺寸還是很難的。接下來(lái)就說(shuō)說(shuō)這次我們的主角 rem （我們一般只適配寬度）

rem 原理解析

首先rem是一個(gè)相對(duì)于根元素fontSize大小的相對(duì)單位，也就是說(shuō) 1rem 等于 html 的 fontSize 大小，接下來(lái)我們只需要改變html 元素的 fontSize 就可以控制 rem 的大小。接下來(lái)我們?cè)趺催m配不同的屏幕呢，只要我們做到屏幕寬度越大 1rem 表示的px值越大及HTML的fontSize值越大，也就是說(shuō) HTML的fontSize要于屏幕的寬度成正比。

再說(shuō)一下一些概念 設(shè)備像素比 、 設(shè)備物理像素 、 設(shè)備獨(dú)立像素 （有時(shí)也說(shuō)是虛擬像素）

設(shè)備像素比 = 設(shè)備物理像素 / 設(shè)備獨(dú)立像素

設(shè)備物理像素：設(shè)備上顯示的最小單位

設(shè)備獨(dú)立像素：獨(dú)立于設(shè)備的用于邏輯上衡量像素的單位（css尺寸）。

就拿iphone6/7/8 做說(shuō)明iphone6/7/8的物理像素是750，是設(shè)備的實(shí)際尺寸，而px是是設(shè)備獨(dú)立像素單位，iphone6/7/8是2倍屏，它的css尺寸就是 375，設(shè)備像素比是設(shè)備出廠時(shí)已經(jīng)設(shè)置好的。 那么我們?cè)趺磳?shí)現(xiàn)適配？

這就用到最流行的rem了

rem的實(shí)現(xiàn)方案

首先、根據(jù)不同屏幕的設(shè)備物理像素，要跟html元素的fontSize設(shè)置不同的px大小

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 screen and (min-width:XXX)來(lái)判斷設(shè)備的尺寸，進(jìn)而設(shè)置html的fontSize

2、js設(shè)置html的fontSize（網(wǎng)易方案）

function setRem () {        let htmlRem = document.documentElement.clientWidth        document.documentElement.style.fontSize = htmlRem/7.5 + 'px'      }setRem()

以上代碼是以iphone6為設(shè)計(jì)稿，結(jié)果是1rem=100px的實(shí)際像素，因?yàn)閕phone6的設(shè)備像素比是2所以1rem在瀏覽器的預(yù)覽中是50px，也就是實(shí)現(xiàn)了1rem和設(shè)備寬度成7.5倍的關(guān)系，設(shè)備寬度改變1rem的實(shí)際大小也會(huì)改變，而且在屏幕中的比例是沒(méi)有變的。（市面上大多數(shù)是這種方案）

3、使用vw、vh