Web移動端布局那些事
我要評論最近做了一個針對微信移動端的項目，在開發(fā)中遇到了不少的坑，學到了也不少，發(fā)現(xiàn)有許多地方值得寫一下，以供做web移動端同學參考參考。
一、單位說到移動端，不得不提適配問題，大大小小的移動設備不但讓做android和ios的難過，因為設備大小和瀏覽器的差異，現(xiàn)在也讓前端開始頭疼了，不過，方法總是比問題多，我們是革命的隊伍，遇到問題就要上！
因為現(xiàn)如今市面上移動設備的分辨率大小不同，顯然咱們常用的px單位在這個時候就有些不太靈光了，為此，css3出了一個新單位——rem，rem是移動端神器，它完美解決了分辨率的適配問題。
rem就是相對于根元素<html>的font-size來做計算,舉個栗子：
如圖這樣，一個寬高各100px的box就出現(xiàn)了，很簡單吧，發(fā)現(xiàn)沒，有些像我們以前常用的em，不過rem是相對于根元素(<html>)的字體大小，em相對 于父元素的字體大小。
雖然很簡單，但是移動設備那么多，我們又怎么根據(jù)手機屏幕的分辨率不同，去設置<html>的字體大小呢？
我知道的方法有2個：
1）通過css媒體查詢
如圖所示，通過媒體查詢的方式，只需要把常用的屏幕寬度考慮進去即可，能夠滿足大部分應用場景，不過這一做法不夠嚴謹，處女座的你，怎么能滿足呢？那就用js去設置fontSize吧！
2）通過js計算
通過js設備的屏幕分辨率，可以計算出相應的字體的大小，這個方法可以適配所有屏幕的大小，這下就完美許多了。
不過有些時候會很麻煩，因為rem會涉及到換算的問題，比如70px的寬，根目錄字體是12px,那換算公式為：70/12 = 5.83333333~，每次寫一個單位都要用計算器去算，想想就淚崩了，不過作為程序猿，怎么能讓人去做這種事，這工作可以讓Less或者Sass等預處理器去完成。
二、使用<meta>標簽中的viewport布局有了rem單位還不夠，得再加上viewport，有了這個東西，麻麻再也不用擔心我的移動端適配問題了，話不多說，直接上圖
紅圈圈的必須要，有了這個<meta>標簽，頁面就有那么點意思了。
三、彈性布局盒子布局以前PC端布局方式通常會使用float、margin、padding等方式布局，這些方法不僅有繁瑣的計算，而且在移動端還容易出錯?，F(xiàn)在移動端，有更好的選擇，使用flexbox布局方式。舉個栗子：用flex做tab
html代碼：
css代碼：
做均分的tab，應該是flexbox最常見的一個功能了，實現(xiàn)原理很簡單，如圖，只需要給“父元素”，“子元素”分別賦予“display：flex”,”flex：1″即可。子元素的寬度不會根據(jù)內(nèi)容的長短而發(fā)生改變。前端同學增加或刪減tab數(shù)量，只需要增減DOM結(jié)構(gòu)即可，無需樣式的修改。一直以來這種布局方式都有兼容性問題，讓前端同學想用，又不敢用，究其原因也就是即分不清它各個版本的編寫規(guī)范和兼容性。值得驚喜的是，目前除了Opera mobile12，移動端的各大瀏覽器都是支持flexbox的舊版語法的，但不包含flex的wrap屬性。所以可以大膽用，不用太擔心。
四、坑布局問題算是解決了，雖然現(xiàn)在看似很完美了，不過，還是有很多坑在等著我們呢！
1、使用rem兼容性沒問題，但是還是有許多問題需要注意
a) 做出來的效果與效果圖有些許偏差
為什么會出現(xiàn)這個原因呢？后來發(fā)現(xiàn)，這是因為瀏覽器對小數(shù)數(shù)值的處理各不相同導致。不同瀏覽器計算rem轉(zhuǎn)換為px數(shù)值時，對于小數(shù)點后的數(shù)值的處理是有所偏差，rem計算偏差的根源是瀏覽器內(nèi)核數(shù)字類型的區(qū)別，如果瀏覽器的內(nèi)核數(shù)字類型是float類型，能夠較好地支持有小數(shù)點的數(shù)值。當瀏覽器內(nèi)核數(shù)字類型是int類型，不支持小數(shù)點，會對數(shù)字進行四舍五入，這樣就會有偏差。如果元素越大偏差得就越明顯！這個坑幾乎無法避免，只能讓他更好的適應最多的瀏覽器。比如chroem內(nèi)核。
b) 雪碧圖定位問題
由上面我們可以得知，rem的換算成px的尺寸非嚴格精確，如果雪碧圖圖標之間的距離過小，就可能導致圖標過界，因此圖與圖之間的間隙需要留相應大一點。
c) rem單位最好不用在PC端
直接舉個栗子：
代碼：
看了代碼，大家應該猜到，這應該是兩個完全相同的盒子才對，不過，效果卻是這樣的
PC效果:
iPhone6效果：
從效果得知，PC端瀏覽器對rem單位支持并不友好，終其原因，我也不得而知，望有知道的同學，多多分享，所以，前端同學盡量別把這個單位放到pc端上使用，以免和設計圖有所出入。
1、使用彈性盒子模型需要注意的問題。
a) 雖然移動端的各大瀏覽器都是支持flexbox的舊版語法的，但是還是得有兼容性寫法;
b) 在開發(fā)的時候，我發(fā)現(xiàn)在使用彈性盒子模型時，如果涉及到文字的時候需要注意，在li里寫上“我們”和“我們的”，分別是兩個字和三個字。會有不同的寬度而導致不均分，解決辦法，如上面css所示，我設置了子元素width為5%（只有設置了li是統(tǒng)一的width就行，不一定需要是5%）就可以解決這個問題。
總結(jié)：
說到這兒，web移動端布局問題基本上算是完了，不過，學這些還不夠，想做好web移動端開發(fā)，還是需要學習很多很多東西（比如性能問題）才能做出用戶體驗超好的web頁面，革命尚未成功，同志還需努力啊。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
原文鏈接：http://blog.csdn.net/jsonchen007/article/details/51942449
相關文章
淺談移動端的自適應布局問題(響應式、rem/em、Js動態(tài))
本篇文章主要介紹了淺談移動端的自適應問題(響應式、rem/em、Js動態(tài)),非常具有實用價值，需要的朋友可以參考下2017-11-01- Flexbox通常能讓我們更好的操作他的子元素布局,這里稍微來提煉一下移動端Web頁面的CSS3 flex布局快速上手指南,需要的朋友可以參考下2016-05-31
- 這篇文章主要介紹了詳解H5 活動頁之移動端 REM 布局適配方法的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-07
