成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vw+rem移動(dòng)端自適應(yīng)布局

Little_XM / 1020人閱讀

摘要：本文同步發(fā)布于我的個(gè)人博客上移動(dòng)端自適應(yīng)布局不管是面試還是工作過(guò)程中，移動(dòng)端的布局都比較常見(jiàn)，而移動(dòng)端適配方法也是多種多樣。表示當(dāng)前視口寬度的百分之一。同時(shí)在移動(dòng)端，的兼容性還不錯(cuò)，完全可以直接使用。這樣完成了一個(gè)簡(jiǎn)單好用的移動(dòng)端布局了

本文同步發(fā)布于我的個(gè)人博客上 - vw+rem移動(dòng)端自適應(yīng)布局

不管是面試還是工作過(guò)程中，移動(dòng)端的布局都比較常見(jiàn)，而移動(dòng)端適配方法也是多種多樣。一般來(lái)說(shuō)，主要還是從viewport、rem、百分比幾個(gè)點(diǎn)下手。

一般來(lái)說(shuō)，開發(fā)過(guò)程中，我們希望能夠直接按照設(shè)計(jì)圖來(lái)開發(fā)，不管設(shè)計(jì)圖是兩倍還是三倍圖，能夠直接寫設(shè)計(jì)圖尺寸而不需要換算，同時(shí)有高質(zhì)的設(shè)計(jì)圖還原度，想想都比較爽。

這里介紹一種使用vw和rem來(lái)布局的方案。

該方案思路主要是，設(shè)置視口寬度為設(shè)備寬度，使用vw來(lái)動(dòng)態(tài)設(shè)置根元素的font-szie，同時(shí)使用sass的css function來(lái)實(shí)現(xiàn)設(shè)計(jì)尺寸轉(zhuǎn)rem的功能，從而實(shí)現(xiàn)一套不需要js計(jì)算而自動(dòng)設(shè)置根元素font-szie的rem布局。

vw

不了解vw的同學(xué)可以了解一下vw。vw表示當(dāng)前視口寬度的百分之一。

rem布局過(guò)程中依賴于根元素的font-size屬性，而如果設(shè)置一個(gè)固定的font-size，再使用rem來(lái)布局，會(huì)導(dǎo)致小屏手機(jī)視覺(jué)上覺(jué)得網(wǎng)頁(yè)被放大，而大屏手機(jī)上則顯得網(wǎng)頁(yè)布局稀疏。

所以咱們需要根據(jù)收據(jù)的屏幕大小等比的設(shè)置font-size，從而實(shí)現(xiàn)大小屏手機(jī)視覺(jué)一致的效果。實(shí)現(xiàn)這個(gè)功能可以使用js在頁(yè)面載入時(shí)，讀取屏幕寬度，再根據(jù)設(shè)計(jì)圖標(biāo)準(zhǔn)寬度做一些轉(zhuǎn)換。

而使用vw天然就是一個(gè)根據(jù)屏幕寬度來(lái)做計(jì)算的長(zhǎng)度單位，完美實(shí)現(xiàn)以上js計(jì)算功能。同時(shí)在移動(dòng)端，vw的兼容性還不錯(cuò)，完全可以直接使用。

計(jì)算方法：

// 設(shè)計(jì)圖標(biāo)準(zhǔn)根元素字體 / 設(shè)計(jì)圖標(biāo)準(zhǔn)寬度 * 100
const vw = 16 / 750 * 100

例如，設(shè)計(jì)圖以6s為標(biāo)準(zhǔn)，2倍尺寸，寬度750px，而你設(shè)置根元素字體大小為16px，那么計(jì)算出的vw就是2.13333vw，直接在css中設(shè)置：

html {
    font-size: 2.13333vw;
}

這個(gè)時(shí)候，我們?cè)跇?biāo)準(zhǔn)寬度下根元素實(shí)際字體大小是16px，如果到5s手機(jī)上面，則根元素實(shí)際字體大小為13.653px。根元素的字體大小變了，頁(yè)面中使用rem來(lái)設(shè)置的邊距、長(zhǎng)度、字體大小都會(huì)發(fā)現(xiàn)改變，頁(yè)面看起來(lái)像是縮小了一點(diǎn)點(diǎn)，但是所有的布局跟6s都是一樣的。

6s顯示效果：

5s顯示效果：

可以看到效果是一致的，換行、截?cái)喽硷@示一致，視覺(jué)效果也是一致的。

橫屏顯示

我們?nèi)粘Ｊ褂弥?，手機(jī)都是豎屏顯示的，但是也會(huì)有橫屏顯示的時(shí)候。如果橫屏顯示，那么手機(jī)的寬度就變成了長(zhǎng)度，長(zhǎng)度就變成了寬度了，這個(gè)時(shí)候vw就顯示的不對(duì)了。看下圖，雖然顯示沒(méi)有亂，但是字變的很大了，復(fù)雜情況下布局估計(jì)也亂了。

還好有應(yīng)對(duì)方法：vmin，這個(gè)屬性表示視口寬度中最小的那個(gè)，豎屏下是vw，橫屏下是vh。設(shè)置了vim之后顯示效果就不錯(cuò)了。

自動(dòng)轉(zhuǎn)換rem

設(shè)計(jì)圖的設(shè)計(jì)尺寸一般都是2倍或者3倍，如果此時(shí)咱們自己轉(zhuǎn)換成一倍的再去根據(jù)根元素計(jì)算rem那也太累了。

比如2倍設(shè)計(jì)圖上面的56px，那么咱們需要：56 / 2 / 16，心態(tài)崩潰~~~

算是不可能自己算的，找插件唄，這個(gè)輪子早就被造好了，postcss-pxtorem就是專門來(lái)干這個(gè)事情的，配置好設(shè)計(jì)尺寸，設(shè)計(jì)倍數(shù)，然后css里面直接寫56px，插件會(huì)自己給你計(jì)算成 (56 / 2 / 16)px，是不是很棒。

加載配置一個(gè)插件也挺麻煩的，如果你剛好在sass之類的css預(yù)處理器，完全可以使用sass function來(lái)自動(dòng)計(jì)算。

$rootSize: 16px!default;
$designWidth: 750px!default;
$designRatio: 2!default;

@function rem($px) {
    @return $px / $rootSize / $designRatio * 1rem;
}
@function rootVw() {
    @return $rootSize / $designWidth * $designRatio * 100vmin;
}

這樣就一次性計(jì)算好了根元素font-size，也可以使用rem()來(lái)自動(dòng)計(jì)算rem了。

html{
    font-size: rootVw();
}
body{
    padding: rem(15px);
}

這樣完成了一個(gè)簡(jiǎn)單好用的移動(dòng)端布局了~~

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114803.html

相關(guān)文章

  • 移動(dòng)端自適應(yīng)布局方案

    摘要：背景現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開發(fā)，包括嵌入頁(yè)，微信頁(yè)面和移動(dòng)頁(yè)。經(jīng)過(guò)研究，我在公司的多個(gè)移動(dòng)端項(xiàng)目使用了布局來(lái)解決移動(dòng)端自適應(yīng)布局的問(wèn)題。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位，布局是一個(gè)流行的解決移動(dòng)端響應(yīng)式布局的方案。 背景 現(xiàn)在工作中有超過(guò)一半的時(shí)間用于移動(dòng)端項(xiàng)目的開發(fā)，包括app嵌入頁(yè)，微信頁(yè)面和移動(dòng)wap頁(yè)。 開發(fā)移動(dòng)端頁(yè)面跟開發(fā)PC頁(yè)面的一個(gè)大區(qū)別就是移動(dòng)端對(duì)響應(yīng)式布...

    zacklee 評(píng)論0 收藏0

  • 移動(dòng)端適配問(wèn)題

    摘要：讀設(shè)備寬度，動(dòng)態(tài)設(shè)置標(biāo)簽的屬性中的值網(wǎng)易的做法網(wǎng)易的做法現(xiàn)在的設(shè)計(jì)稿都是寬度的寬，那要想實(shí)現(xiàn)樣式設(shè)計(jì)圖這種比較方便的折算方式，就要設(shè)置成也就是說(shuō)總結(jié)總結(jié)是為了實(shí)現(xiàn)移動(dòng)端自適應(yīng)布局。適配問(wèn)題 怎么適配iphone6 1px問(wèn)題 為什么頁(yè)面與設(shè)計(jì)稿會(huì)出現(xiàn)偏差？ dpr=設(shè)備像素/ css像素，只有dpr等于1的時(shí)候，實(shí)際效果和設(shè)計(jì)稿的尺寸比例才是1:1。 因?yàn)閕Phone6的DPR（設(shè)備像素比）...

    孫淑建 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-23）-移動(dòng)端適配bug

    摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個(gè)真實(shí)的設(shè)置為一個(gè)理想值追加到樹中獲取理想值和實(shí)際值的比例計(jì)算值進(jìn)行比例換算移動(dòng)端適配方案前端培訓(xùn)初級(jí)階段之移動(dòng)端適配原理參考文獻(xiàn)淘寶彈性布局方案實(shí)踐布局詳解移動(dòng)端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

    FingerLiu 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-23）-移動(dòng)端適配bug

    摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個(gè)真實(shí)的設(shè)置為一個(gè)理想值追加到樹中獲取理想值和實(shí)際值的比例計(jì)算值進(jìn)行比例換算移動(dòng)端適配方案前端培訓(xùn)初級(jí)階段之移動(dòng)端適配原理參考文獻(xiàn)淘寶彈性布局方案實(shí)踐布局詳解移動(dòng)端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

    xi4oh4o 評(píng)論0 收藏0

  • 前端培訓(xùn)-初級(jí)階段-場(chǎng)景實(shí)戰(zhàn)（2019-05-23）-移動(dòng)端適配bug

    摘要：前端最基礎(chǔ)的就是。默認(rèn)構(gòu)建一個(gè)真實(shí)的設(shè)置為一個(gè)理想值追加到樹中獲取理想值和實(shí)際值的比例計(jì)算值進(jìn)行比例換算移動(dòng)端適配方案前端培訓(xùn)初級(jí)階段之移動(dòng)端適配原理參考文獻(xiàn)淘寶彈性布局方案實(shí)踐布局詳解移動(dòng)端自適應(yīng)方案 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTML/CSS/JS），本著提升技...

    psychola 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<