vw+rem移動端自適應布局

Little_XM 發布于2019-08-30 11:09 / 1002人閱讀

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

本文同步發布于我的個人博客上 - vw+rem移動端自適應布局

不管是面試還是工作過程中，移動端的布局都比較常見，而移動端適配方法也是多種多樣。一般來說，主要還是從viewport、rem、百分比幾個點下手。

一般來說，開發過程中，我們希望能夠直接按照設計圖來開發，不管設計圖是兩倍還是三倍圖，能夠直接寫設計圖尺寸而不需要換算，同時有高質的設計圖還原度，想想都比較爽。

這里介紹一種使用vw和rem來布局的方案。

該方案思路主要是，設置視口寬度為設備寬度，使用vw來動態設置根元素的font-szie，同時使用sass的css function來實現設計尺寸轉rem的功能，從而實現一套不需要js計算而自動設置根元素font-szie的rem布局。

不了解vw的同學可以了解一下vw。vw表示當前視口寬度的百分之一。

rem布局過程中依賴于根元素的font-size屬性，而如果設置一個固定的font-size，再使用rem來布局，會導致小屏手機視覺上覺得網頁被放大，而大屏手機上則顯得網頁布局稀疏。

所以咱們需要根據收據的屏幕大小等比的設置font-size，從而實現大小屏手機視覺一致的效果。實現這個功能可以使用js在頁面載入時，讀取屏幕寬度，再根據設計圖標準寬度做一些轉換。

而使用vw天然就是一個根據屏幕寬度來做計算的長度單位，完美實現以上js計算功能。同時在移動端，vw的兼容性還不錯，完全可以直接使用。

計算方法：

// 設計圖標準根元素字體 / 設計圖標準寬度 * 100
const vw = 16 / 750 * 100

例如，設計圖以6s為標準，2倍尺寸，寬度750px，而你設置根元素字體大小為16px，那么計算出的vw就是2.13333vw，直接在css中設置：

html {
    font-size: 2.13333vw;
}

這個時候，我們在標準寬度下根元素實際字體大小是16px，如果到5s手機上面，則根元素實際字體大小為13.653px。根元素的字體大小變了，頁面中使用rem來設置的邊距、長度、字體大小都會發現改變，頁面看起來像是縮小了一點點，但是所有的布局跟6s都是一樣的。

6s顯示效果：

5s顯示效果：

可以看到效果是一致的，換行、截斷都顯示一致，視覺效果也是一致的。

橫屏顯示

我們日常使用中，手機都是豎屏顯示的，但是也會有橫屏顯示的時候。如果橫屏顯示，那么手機的寬度就變成了長度，長度就變成了寬度了，這個時候vw就顯示的不對了。看下圖，雖然顯示沒有亂，但是字變的很大了，復雜情況下布局估計也亂了。

還好有應對方法：vmin，這個屬性表示視口寬度中最小的那個，豎屏下是vw，橫屏下是vh。設置了vim之后顯示效果就不錯了。

自動轉換rem

設計圖的設計尺寸一般都是2倍或者3倍，如果此時咱們自己轉換成一倍的再去根據根元素計算rem那也太累了。

比如2倍設計圖上面的56px，那么咱們需要：56 / 2 / 16，心態崩潰~~~

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

加載配置一個插件也挺麻煩的，如果你剛好在sass之類的css預處理器，完全可以使用sass function來自動計算。

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

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

這樣就一次性計算好了根元素font-size，也可以使用rem()來自動計算rem了。

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

這樣完成了一個簡單好用的移動端布局了~~

GPU云服務器云服務器移動端自適應 rem寬度自適應 rem布局移動端布局

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114803.html

移動端自適應布局方案

摘要：背景現在工作中有超過一半的時間用于移動端項目的開發，包括嵌入頁，微信頁面和移動頁。經過研究，我在公司的多個移動端項目使用了布局來解決移動端自適應布局的問題。簡單的說它就是一個相對單位，布局是一個流行的解決移動端響應式布局的方案。背景現在工作中有超過一半的時間用于移動端項目的開發，包括app嵌入頁，微信頁面和移動wap頁。開發移動端頁面跟開發PC頁面的一個大區別就是移動端對響應式布...

zacklee 2019-08-26 11:50 評論0 收藏0
移動端適配問題

摘要：讀設備寬度，動態設置標簽的屬性中的值網易的做法網易的做法現在的設計稿都是寬度的寬，那要想實現樣式設計圖這種比較方便的折算方式，就要設置成也就是說總結總結是為了實現移動端自適應布局。適配問題怎么適配iphone6 1px問題為什么頁面與設計稿會出現偏差？ dpr=設備像素/ css像素，只有dpr等于1的時候，實際效果和設計稿的尺寸比例才是1:1。因為iPhone6的DPR（設備像素比）...

孫淑建 2019-04-23 13:23 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-05-23）-移動端適配bug

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

FingerLiu 2019-08-02 16:18 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-05-23）-移動端適配bug

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

xi4oh4o 2019-08-26 13:47 評論0 收藏0
前端培訓-初級階段-場景實戰（2019-05-23）-移動端適配bug

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

psychola 2019-08-30 10:54 評論0 收藏0