淺談移動端佈局問題

移動端推廣速度快，效果好，愈來愈多的企業，商家開始重視移動站的建設和移動頁面（h5）的製做。隨着移動頁面的玩法愈來愈多，對前端技術的要求也會愈來愈高。
選擇合適的佈局，是寫好移動頁面的第一步。今天咱們就來談談移動端的佈局問題。

爲何移動端佈局如此混亂？這是由多方的緣由形成的。
1.css這套技術系統自己十分混亂，基本上能夠說毫無規律可言，依賴於技術人員的熟練程度而不是邏輯更多一些；
2．css歷經了多個時代的升級，每一次升級以後，新的技術標準和舊的基本上沒有任何關聯。好比：table佈局，div+css佈局，flex佈局，grid佈局等；
3.手機終端市場的混亂。當前市場上手機的尺寸五花八門；加上由iphone的retina技術帶來的dpr的混亂；

關於移動設備一些基本概念的理解。
一．物理設備像素。
思考：爲何手電筒只能發出一種顏色的光，而咱們的屏幕能發出這麼多種顏色的光?
由於咱們的屏幕是由無數個小的手電筒組成的，每一個點能夠發不一樣顏色的光，最後就組成了咱們看到的彩色的效果。
每張圖片都是由色點組成的，每一個色點稱爲一個像素。一張圖片由30萬個色點組成，這個圖片的像素就是30W。咱們常說相機是多少像素，這個像素實際就是在說這款照相機的感器件有多少個，有100W個感光器件的相機就是100W像素的相機，有4000W個感光器件的相機就是4000W像素，以此類推。一臺100W像素的相機拍攝的照片洗成5寸的照片會比洗成6寸清晰一點。

二．屏幕分辨率
屏幕分辨率是屏幕每行的像素點數*每列的像素點數，每一個屏幕有本身的分辨率。屏幕分辨率越高，所呈現的色彩越多，清晰度越高。
結論：

1. 像素的單位本質上是：個數，100像素你能夠理解成你有100個手電筒；
2. 一樣大小(好比1cm*1cm大小的矩形)，裏面的像素越多，畫面越清晰；

三．css像素
在pc端1css像素至關於1物理設備像素。
思考：
咱們的手機分辨率是640*1136(iphone 5和iphone 5s的物理設備分辨率)，若是咱們打開一個純粹pc端的網站會出現什麼狀況?
(好比jumei.com,min-width是1090px,在pc端的個人電腦的設備寬度是1280,經過screen.width進行檢測)
咱們會發現網站會縮小到咱們能夠看到整個網站(www.jubi.com)
則會發現，有滾動條了,由於禁止縮放了

四． dpr
1個css像素佔多少物理設備像素
思考：iphone 5或者iphone 5s一屏幕能看到的極限是多少寬度?
應該是320(這是默認的可視區的css寬度) * 2 = 640px

以上，咱們學習完了全部關於移動端佈局相關的概念，接下來，咱們來聊一聊佈局的思路。

假如咱們有640px的設計稿，咱們如何才能讓用戶所有看到呢?
思路一：百分比佈局
把尺寸除以2，好比咱們量出來的是640px ---> 實際上咱們只寫320px；
若是是iphone 6怎麼辦? iphone 6的寬度是375px；
因爲320和375的寬度其實差異不大，咱們能夠不定寬度,也就是把總體寬度設定爲100%，而後其餘的所有量出來是多少。
佈局方法

• 拿到設計師給咱們的設計稿以後(推薦640px),把全部量出來的尺寸除以2便可
• 遇到等分就用百分比
• 左浮動 + 右浮動(導航部分實現、折扣推薦導航部分) --> 適合於全部的元素寬度固定的
• 左浮動 + padding擠(見超值折扣推薦內容部分) 本質上元素大小在任何尺寸下面都是一致，改變的實際上是元素與元素之間的間距大小 --> 適合一個元素寬度固定，另外一個寬度自適應；
  網站示例
• http://m.duba.com/
• http://m.lagou.com/

百分比佈局的缺點
在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度仍是和原來同樣，實際顯示很是的不協調，這就是流式佈局的最致命的缺點，每每只有幾個尺寸的手機下看到的效果是使人滿意的，其實不少視覺設計師應該沒法接受這種效果，由於他們的設計圖在大屏幕手機下看到的效果至關因而被橫向拉長來同樣。流式佈局並非最理想的實現方式，經過大量的百分比佈局，會常常出現許多兼容性的問題，還有就是對設計有不少的限制，由於他們在設計之初就須要考慮流式佈局對元素形成的影響，只能設計橫向拉伸的元素佈局，設計的時候存在不少侷限性。

思路二:rem佈局
如何理解rem佈局？
思考一個問題，假如咱們的設計稿是750px,咱們量出來一個盒子的寬度是75px,那麼在640px下面，它應該是多少合適呢? 答案是:64
問題，若是才能保證你寫的css的尺寸只須要寫一次，在不一樣的屏幕尺寸下面不用改?
假如咱們在750px下面，咱們讓html的font-size爲75,則這個盒子的寬度是1rem,在640px下面咱們讓html的font-size爲64,則這個盒子的寬度也是1rem，問題就這樣解決了。

那麼實際開發中，該用什麼樣等佈局思路？
咱們打開m.jd.com,m.vip.com，會發現，實際上沒有一個網站用了純粹的百分比或者rem佈局，常常會發現各類佈局思路混在一塊兒，由於沒有一套佈局思路可以通用保證不出問題

爲何rem不是萬能的?
好比1px，若是咱們在dpr是2的狀況下就會變得很粗，咱們知道那並非真正的1像素。
推薦佈局思路——使用由阿里出品的lib-flexible庫。
網址：https://github.com/amfe/lib-flexible；
該如何使用呢？

1. 引入佈局用的flexible.js要注意的是不要再寫meta:viewport標籤了，由於flexible.js會自動幫你建立；
2. 引入base.css；
3. 把設計師的設計稿拿過來，標註稿基準字體大小 = 標註稿寬度 / 10，如標註稿寬爲750，標註稿基準字體大小爲75；標註稿寬爲640，標註稿基準字體大小爲64；
4. 除了字體大小之外，其餘全部的均按rem來，好比你的設計稿是750px的，那麼，假如你量出來的是75px,則是1rem；
   字體除外，要根據不一樣的dpr設置不一樣的大小，好比若是是750的設計稿，那麼字體假如是24px,則在dpr爲1的狀況下是16px,dpr2的狀況下是24px,dpr3的狀況下是32px(這塊涉及到字體專業知識，總結一句話就是沒有人會考慮用奇數字體，https://www.zhihu.com/question/20440679，因此不能讓工具幫咱們自動算，得寫死。

以上是我我的關於移動端佈局的一些總結。若有不妥的地方，還請指正。

最後附上關於移動端常見問題當網址：

• http://www.cnblogs.com/PeunZhang/p/3407453.html
• https://github.com/zhiqiang21/blog/blob/master/README.md
• https://github.com/sunmaobin/Mars/tree/master/issues
• http://www.cnblogs.com/PeunZhang/p/4517864.html
• http://www.cnblogs.com/PeunZhang/p/4903710.html
• http://www.cnblogs.com/PeunZhang/p/4633255.html
• http://www.cnblogs.com/PeunZhang/p/3835717.html
• http://www.cnblogs.com/PeunZhang/p/3592096.html