說到移動端，不得不提適配問題，大大小小的移動裝置不但讓做android和ios的難過，因為裝置大小和瀏覽器的差異，現在也讓前端開始頭疼了，不過，方法總是比問題多，我們是革命的隊伍，遇到問題就要上！
因為現如今市面上移動裝置的解析度大小不同，顯然咱們常用的px單位在這個時候就有些不太靈光了，為此，css3出了乙個新單位——rem，rem是移動端神器，它完美解決了解析度的適配問題。
rem就是相對於根元素的font-size來做計算,舉個栗子：
如圖這樣，乙個寬高各100px的box就出現了，很簡單吧，發現沒，有些像我們以前常用的em，不過rem是相對於根元素()的字型大小，em相對 于父元素的字型大小。
雖然很簡單，但是移動裝置那麼多，我們又怎麼根據手機螢幕的解析度不同，去設定的字型大小呢？
我知道的方法有2個：
1）通過css**查詢
如圖所示，通過**查詢的方式，只需要把常用的螢幕寬度考慮進去即可，能夠滿足大部分應用場景，不過這一做法不夠嚴謹，**座的你，怎麼能滿足呢？那就用js去設定fontsize吧！
2）通過js計算
通過js裝置的螢幕解析度，可以計算出相應的字型的大小，這個方法可以適配所有螢幕的大小，這下就完美許多了。
不過有些時候會很麻煩，因為rem會涉及到換算的問題，比如70px的寬，根目錄字型是12px,那換算公式為：70/12 = 5.83333333~，每次寫乙個單位都要用計算器去算，想想就淚崩了，不過作為程式猿，怎麼能讓人去做這種事，這工作可以讓less或者sass等預處理器去完成。
有了rem單位還不夠，得再加上viewport，有了這個東西，麻麻再也不用擔心我的移動端適配問題了，話不多說，直接上圖
紅圈圈的必須要，有了這個標籤，頁面就有那麼點意思了。
以前pc端布局方式通常會使用float、margin、padding等方式布局，這些方法不僅有繁瑣的計算，而且在移動端還
容易出錯。現在移動端，有更好的選擇，使用flexbox布局方式。舉個栗子：用flex做tab
做均分的tab，應該是flexbox最常見的乙個功能了，實現原理很簡單，如圖，只需要給「父元素」，「子元素」
分別賦予「display：flex」,」flex：1″即可。子元素的寬度不會根據內容的長短而發生改變。前端同學增加或刪減
tab數量，只需要增減dom結構即可，無需樣式的修改。
一直以來這種布局方式都有相容性問題，讓前端同學想用，又不敢用，究其原因也就是即分不清它各個版本的
編寫規範和相容性。值得驚喜的是，目前除了opera mobile12，移動端的各大瀏覽器都是支援flexbox的舊版語法
的，但不包含flex的wrap屬性。所以可以大膽用，不用太擔心。
布局問題算是解決了，雖然現在看似很完美了，不過，還是有很多坑在等著我們呢！
1、使用rem相容性沒問題，但是還是有許多問題需要注意
a) 做出來的效果與效果圖有些許偏差
為什麼會出現這個原因呢？後來發現，這是因為瀏覽器對小數數值的處理各不相同導致。不同瀏覽器計算rem轉
換為px數值時，對於小數點後的數值的處理是有所偏差，rem計算偏差的根源是瀏覽器核心數字型別的區別，
如果瀏覽器的核心數字型別是float型別，能夠較好地支援有小數點的數值。當瀏覽器核心數字型別是int型別，
不支援小數點，會對數字進行四捨五入，這樣就會有偏差。如果元素越大偏差得就越明顯！這個坑幾乎無法避免，
只能讓他更好的適應最多的瀏覽器。比如chroem核心。
b) 雪碧圖定位問題
由上面我們可以得知，rem的換算成px的尺寸非嚴格精確，如果雪碧圖圖示之間的距離過小，就可能導致圖示過界，
因此圖與圖之間的間隙需要留相應大一點。
c) rem單位最好不用在pc端
直接舉個栗子：
看了**，大家應該猜到，這應該是兩個完全相同的盒子才對，不過，效果卻是這樣的
pc效果:
iphone6效果：
從效果得知，pc端瀏覽器對rem單位支援並不友好，終其原因，我也不得而知，望有知道的同學，多多分享，
所以，前端同學盡量別把這個單位放到pc端上使用，以免和設計圖有所出入。
1、使用彈性盒子模型需要注意的問題。
a) 雖然移動端的各大瀏覽器都是支援flexbox的舊版語法的，但是還是得有相容性寫法;
b) 在開發的時候，我發現在使用彈性盒子模型時，如果涉及到文字的時候需要注意，在li裡寫上「我們」和「我們的」，分別是兩個字和三個字。會有不同的寬度而導致不均分，解決辦法，如上面css所示，我設定了子元素width為5%（只有設定了li是統一的width就行，不一定需要是5%）就可以解決這個問題。
說到這兒，web移動端布局問題基本上算是完了，不過，學這些還不夠，想做好web移動端開發，
還是需要學習很多很多東西（比如效能問題）才能做出使用者體驗超好的web頁面，革命尚未成功，同志還需努力啊。
Web移動端布局
螢幕尺寸是指螢幕對角線的長度，單位為英吋，1英吋 2.54厘公尺 常見移動端裝置螢幕尺寸 iphone4 3.5英吋 iphone6,7,8 4.7英吋 iphone6,7,8 plus 5.5英吋 iphone5 4英吋 螢幕解析度是指橫縱方向上的畫素點數，單位為px，1px 1畫素點 常見移動端...
web移動端布局
對移動端適配不熟悉的同學，可以看看 使用flexible實現手淘h5頁面的終端適配 再聊移動端頁面的適配 如何在vue專案中使用vw實現移動端適配 vw 是什麼？vw viewport s width 簡寫，1vw 等於 window.innerwidth 的 1 vh viewport s hei...
移動Web端 流式布局
2 作為開發者無需關注這些解析度，因為我們常用的尺寸單位是 px 3 移動端除錯方法 1 chrome devtools 谷歌瀏覽器 的模擬手機除錯 2 搭建本地web伺服器，手機和伺服器乙個區域網內，通過手機訪問伺服器 3 使用外網伺服器，直接ip或網域名稱訪問 二 視口 視口 viewport ...