rem兩三事

Alliot 發(fā)布于2019-08-29 18:41 / 531人閱讀

摘要：昨天被問(wèn)到關(guān)于的問(wèn)題，當(dāng)時(shí)一臉懵逼，因?yàn)閷懥藘赡辏緵](méi)怎么碰過(guò)，有點(diǎn)迷糊。缺點(diǎn)無(wú)縮放，且針對(duì)的屏沒(méi)有做適配，導(dǎo)致對(duì)一些手機(jī)的適配不是很到位。缺點(diǎn)需要根據(jù)設(shè)計(jì)稿進(jìn)行基準(zhǔn)值換算，在不使用編輯器插件開(kāi)發(fā)時(shí)，單位計(jì)算復(fù)雜。

os：昨天被問(wèn)到關(guān)于rem的問(wèn)題，當(dāng)時(shí)一臉懵逼，因?yàn)閷懥藘赡阩s，基本沒(méi)怎么碰過(guò)css，有點(diǎn)迷糊。

px、em、rem區(qū)別

不同于px這個(gè)固定單位，em和rem都是相對(duì)單位，em是相對(duì)父元素的font-size，層級(jí)越深，em的換算越復(fù)雜，rem，即root-em，相對(duì)于根html的font-size。做響應(yīng)式頁(yè)面，使用rem較好，在不同瀏覽器間的兼容性也好。

rem適配移動(dòng)端方案

- 方案一：

html{font-size:16px !default;}
box1的寬度 = 設(shè)計(jì)稿上box1顯示的寬度/(設(shè)計(jì)稿寬度640/屏幕寬度320)/font-size；

很多文章都會(huì)說(shuō)16算起來(lái)較麻煩，所以設(shè)定html{font-size:62.5%}，這樣根字體大小就是10px了，算起來(lái)較方便，公式還是上面的公式。
然后根據(jù)不同的媒體查詢?cè)O(shè)置font-size的值（百分比）。

@media screen and (max-width:1440px) and (-webkit-min-device-pixel-ratio:1.5) and (orientation:portrait){ 
    html { font-size: 281.5%; }
}
@media screen and (max-width:1080px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 210.9%; }
}
// ...
@media screen and (max-width:320px) and (-webkit-min-device-pixel-ratio:1.5){ 
    html { font-size: 62.5%; }
}

優(yōu)點(diǎn)：較為普遍性，換算也簡(jiǎn)單；
缺點(diǎn)：通過(guò)媒體查詢需要適配多個(gè)設(shè)備，有些設(shè)備不在范圍內(nèi)就不能很好的適配。

- 方案二：（網(wǎng)易方案）

手機(jī)端：基準(zhǔn)值為100，拿到設(shè)計(jì)稿除以100，即為body的width，入設(shè)計(jì)稿640，那就以iphone5為例，body{width：6.4rem}；

document.documentElement.style.fontSize = document.documentElement.clientWidth/6.4 + "px";

因?yàn)楦鵩ontsize隨著屏幕寬度變化，所以不用媒體查詢適配，box1{width:設(shè)計(jì)圖box1寬度/基準(zhǔn)值100}；

優(yōu)點(diǎn)：通過(guò)動(dòng)態(tài)根font-size來(lái)做適配，基本無(wú)兼容性問(wèn)題，適配較為精準(zhǔn)，換算簡(jiǎn)便。
缺點(diǎn)：無(wú)viewport縮放，且針對(duì)iPhone的Retina屏沒(méi)有做適配，導(dǎo)致對(duì)一些手機(jī)的適配不是很到位。

- 方案三（淘寶flexible）

大漠：使用Flexible實(shí)現(xiàn)手淘H5頁(yè)面的終端適配

1.引入flexible

2.基準(zhǔn)值 = 設(shè)計(jì)圖寬度/10；例如設(shè)計(jì)圖是750px，基準(zhǔn)值就是75；
box1的寬度 = 設(shè)計(jì)圖box1寬度/基準(zhǔn)值；例如設(shè)計(jì)圖上box1為150px，則為2rem；其實(shí)意思就是把整個(gè)設(shè)計(jì)圖寬度設(shè)置為10rem。

優(yōu)點(diǎn)：通過(guò)動(dòng)態(tài)根font-size、viewpor、dpr來(lái)做適配，無(wú)兼容性問(wèn)題，適配精準(zhǔn)。
缺點(diǎn)：需要根據(jù)設(shè)計(jì)稿進(jìn)行基準(zhǔn)值換算，在不使用sublime text編輯器插件開(kāi)發(fā)時(shí)，單位計(jì)算復(fù)雜。

rem換算

我現(xiàn)在做的項(xiàng)目，對(duì)rem的換算用的是sass的函數(shù)，是通過(guò)方案一的媒體查詢來(lái)做的：

@function rem($px, $font-size){
  //$px為需要轉(zhuǎn)換的字號(hào)，$font-size為根字體大小
  @return $px / ($font-size/($font-size*0+1)) * 1rem;
}
.box1{width: rem(100);}

關(guān)于每種方案的優(yōu)勢(shì)和劣勢(shì)，借鑒于有你便是晴天，感謝大神分享。