移動適配請使用比rem等更好的佈局方案

  移動端大行其道，rem/em、百分比、響應式方案更是層出不窮，看見周圍的夥伴們都在對使用rem和百分比情有獨鍾，可我卻偏不愛，之因此出現如此多的方法，其目的只有一個屏幕適配。

  屏幕適配顧名思義就是一張設計稿還原出的程序要適應於當下市場上各類大小屏幕不一的終端，作到寫一次各類終端大小的屏幕都能比例協調的顯示。下面咱們先來看下你們耳熟能詳的幾種方案是如何去解決屏幕適配的。

1. rem/em：rem根元素字體大小單位，em元素字體大小單位。使用rem的時候咱們須要在css中先爲html元素設定font-size屬性，其做爲整個頁面單位的元單位，這個大小要設置爲多少呢？這要依據設計圖和屏幕尺寸來決定，一般咱們還須要使用js來優先判斷當前要適配屏幕的大小，以後去動態的更改html中的font-size大小；而em這個單位和百分比類似，子類的大小受其父類控制，好比父類的font-size爲16px，在子類中咱們寫0.5em極爲8px，這樣一級一級的嵌套寫下來，最後咱們要作也是經過js來判斷當前要適配屏幕的尺寸，去更改最高層級上的font-size。

2. 百分比：em玩膩了，換個新的玩法，並且在em使用中，若是適配器尺寸判斷位置稍有不適，頁面會出現頓閃，不適合新人玩，若是你如今要作一個撐滿全屏幕的移動網站，那麼最佳的選擇方案莫過於百分比佈局了。因此的尺寸都除以設計圖的總寬高給定一個百分比便可。

3. 響應式：響應式是pc和移動端一站式的解決方案，經過css3的媒體查詢去判斷當前終端的屏幕尺寸來決定當下要顯示元素。

  以上全部的方法都須要事先獲知適配器當下的尺寸，百分比佈局雖然不須要，可是他的優點更適合於作全屏鋪滿的網站，那有沒有一種方案是直接相對於屏幕大小而言呢？畢竟咱們最終目的也是屏幕適配，答案就是本問給你們推薦的css屬性vw和vh--viewport width/height，視口的寬高，指代的是瀏覽器內部的但是區域的寬高，1vw等於視口寬度的1%，很明顯這個單位是以視口也就是屏幕大小做爲評估依據的，正合咱們意，咱們先來看他們的支持狀況。

 

 

更好的方案

  市面上常見的幾種移動端佈局方案，如圖2圖3所示，有最大寬度限制的和徹底百分比的，vw的vh這兩種都試用，由於他以屏幕爲基準，好比div寬37.5px，按照iphone6寬度375計算，37.5/375=0.1，0.1*100=10,也就是10vw，如此以來只要咱們把這個div設置爲10vw，那他在各類屏幕下佔的比例都是同樣的，是否是很方便，你們可能會說這個和百分比佈局差很少，其實否則，他們仍是有細微區別的，百分比方式作全屏移動站點比較方便，要作一個如圖2所示限制寬的站點用百分比方式就不如vw來的方便，再說vw本就很方便，爲和咱們就不用呢？

html

<div style="width:50vw;height:50px;background-color:red">
</div> 

 

    

 

 

 

　

　這個div在任何屏幕下始終佔據了屏幕的一半。。。如圖4，5，移動端安卓和ios是主流而其都在採用webkit內核vw基本在webkit內核的瀏覽器上所向披靡，爲什麼咱們就總是去遺忘他呢？

 

  

 

 

  另外還有一個經常使用的css屬性咱們也應該使用上clac()，其是用來計算屬性寬高的，好比如今我要寫一個以下頁面，左側固定的移動站點，右側呀隨着屏幕的適配去改變，那我右側的寬度就能夠寫成width:calc(100vw - 左側寬度),須要注意的是運算符號的兩邊要有一個空格，這個屬性能夠很大程度的方便咱們的計算，若是你的項目中既用到了百分比也用到了rem，你就直接能夠把這些單位混雜到一塊計算，而不用顧慮那麼多。

 

 

總結

  以上是我日常用到的兩個高頻屬性，我不知道爲什麼你們提到vw和vh的不多，即便移動端開發都不怎麼提到vw和vh，其實在這裏我想說他們真滴很好用。好用過上邊的任何單位，屏幕適配適配的是屏幕，而vw和vh正是指咱們屏幕內視口的大小，多美好的單位你卻老是與之錯失。並且市面上基本大多數的佈局就是我上文提到的這三種，有寬度限制的，全屏百分比的，還有限制某些欄目固定寬度滴。。。他們均可以用vw輕易的解決。。。