亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

rem兩三事

Alliot / 621人閱讀

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

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

px、em、rem區(qū)別

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

rem適配移動端方案

- 方案一：

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

很多文章都會說16算起來較麻煩，所以設(shè)定html{font-size:62.5%}，這樣根字體大小就是10px了，算起來較方便，公式還是上面的公式。
然后根據(jù)不同的媒體查詢設(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)：較為普遍性，換算也簡單；
缺點(diǎn)：通過媒體查詢需要適配多個設(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)：通過動態(tài)根font-size來做適配，基本無兼容性問題，適配較為精準(zhǔn)，換算簡便。
缺點(diǎn)：無viewport縮放，且針對iPhone的Retina屏沒有做適配，導(dǎo)致對一些手機(jī)的適配不是很到位。

- 方案三（淘寶flexible）

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

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í)意思就是把整個設(shè)計(jì)圖寬度設(shè)置為10rem。

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

rem換算

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/114504.html

相關(guān)文章

  • Vue 多系統(tǒng)切換實(shí)現(xiàn)方案(iframe嵌套的兩三事)

    摘要：總結(jié)來說，低效，所以現(xiàn)在想將幾個系統(tǒng)融合到一個里邊，并且每次切換系統(tǒng)的時(shí)候保留用戶的操作。我是用開發(fā)的，所以切換的地方直接用了的切換組件。 前言 公司分好幾個后臺模塊，統(tǒng)一使用vue+elementUi框架開發(fā)，每一個后臺模塊都是單獨(dú)團(tuán)隊(duì)開發(fā)的。并且?guī)讉€系統(tǒng)整體的風(fēng)格、布局一樣的，包括左側(cè)邊欄，上方的面包屑等用戶在使用的時(shí)候，可能要切換別的系統(tǒng)就要在瀏覽器里，新打開窗口，再輸入網(wǎng)址，回...

    cocopeak 評論0 收藏0

  • PostgreSQL兩三事

    摘要：在沒有手動配置的情況下，之類的事情，不得不交給做，而與賬戶之間的來回切換，也會浪費(fèi)寶貴的時(shí)間。作為秒數(shù)表示空閑時(shí)間間隔，當(dāng)一個連接持續(xù)該時(shí)間閑置，會發(fā)送包給客戶端，若連續(xù)個包都在秒內(nèi)沒有回應(yīng)，則會認(rèn)為這個已死。 不要用Graphic Installer 至少在Ubuntu下，覺得原生的apt-get管理方式更合適，PG的文件資源會被分配到應(yīng)該的地方，Linux的系統(tǒng)文件結(jié)構(gòu)也是種非常穩(wěn)...

    leeon 評論0 收藏0

  • outline和他娘親border兩三事

    摘要：是啥顧英文名思義就是元素的輪廓，其實(shí)一般我們很少去設(shè)置元素的樣式，因此很多人對他不太了解。瀏覽器默認(rèn)給很多特定元素的某些行為加上了樣式，比如標(biāo)簽輸入框等。 outline是啥？ outline顧英文名思義就是元素的輪廓，其實(shí)一般我們很少去設(shè)置元素的outline樣式，因此很多人對他不太了解。瀏覽器默認(rèn)給很多特定元素的某些行為加上了outline樣式，比如a標(biāo)簽、input輸入框等。當(dāng)你...

    DesGemini 評論0 收藏0

  • react+redux+webpack移動端項(xiàng)目總結(jié)

    摘要：前言距離我進(jìn)新公司也有一個多月，這一個月的事件使用寫了一個項(xiàng)目，期間斷斷續(xù)續(xù)重構(gòu)了兩三次，目前已經(jīng)完成第一階段測試，也總結(jié)分享一些使用的一些坑。因?yàn)樗牟豢勺兲攸c(diǎn)，我們不會在不經(jīng)意見不小心改變了，而引起不必要的問題。 前言 距離我進(jìn)新公司也有一個多月，這一個月的事件使用react寫了一個項(xiàng)目，期間斷斷續(xù)續(xù)重構(gòu)了兩三次，目前已經(jīng)完成第一階段測試，也總結(jié)分享一些使用react的一些坑。 s...

    garfileo 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<