移動(dòng)端推廣速度快，效果好，越來(lái)越多的企業(yè)，商家開(kāi)始重視移動(dòng)站的建設(shè)和移動(dòng)頁(yè)面（h5）的制作。隨著移動(dòng)頁(yè)面的玩法越來(lái)越多，對(duì)前端技術(shù)的要求也會(huì)越來(lái)越高。
選擇合適的布局，是寫(xiě)好移動(dòng)頁(yè)面的第一步。今天我們就來(lái)談?wù)勔苿?dòng)端的布局問(wèn)題。
為什么移動(dòng)端布局如此混亂？這是由多方的原因造成的。
1. css這套技術(shù)系統(tǒng)本身十分混亂，基本上可以說(shuō)毫無(wú)規(guī)律可言，依賴(lài)于技術(shù)人員的熟練程度而不是邏輯更多一些；
2．css歷經(jīng)了多個(gè)時(shí)代的升級(jí)，每一次升級(jí)之后，新的技術(shù)標(biāo)準(zhǔn)和舊的基本上沒(méi)有任何關(guān)聯(lián)。比如：table布局，div+css布局，flex布局，grid布局等；
3. 手機(jī)終端市場(chǎng)的混亂。當(dāng)前市場(chǎng)上手機(jī)的尺寸五花八門(mén)；加上由iphone的retina技術(shù)帶來(lái)的dpr的混亂；
關(guān)于移動(dòng)設(shè)備一些基本概念的理解。
一． 物理設(shè)備像素。
思考：為什么手電筒只能發(fā)出一種顏色的光，而我們的屏幕能發(fā)出這么多種顏色的光?
因?yàn)槲覀兊钠聊皇怯蔁o(wú)數(shù)個(gè)小的手電筒組成的，每個(gè)點(diǎn)可以發(fā)不同顏色的光，最后就組成了我們看到的彩色的效果。
每張圖片都是由色點(diǎn)組成的，每個(gè)色點(diǎn)稱(chēng)為一個(gè)像素。一張圖片由30萬(wàn)個(gè)色點(diǎn)組成，這個(gè)圖片的像素就是30W。我們常說(shuō)相機(jī)是多少像素，這個(gè)像素實(shí)際就是在說(shuō)這款照相機(jī)的感器件有多少個(gè)，有100W個(gè)感光器件的相機(jī)就是100W像素的相機(jī)，有4000W個(gè)感光器件的相機(jī)就是4000W像素，以此類(lèi)推。一臺(tái)100W像素的相機(jī)拍攝的照片洗成5寸的照片會(huì)比洗成6寸清晰一點(diǎn)。
二． 屏幕分辨率
屏幕分辨率是屏幕每行的像素點(diǎn)數(shù)*每列的像素點(diǎn)數(shù)，每個(gè)屏幕有自己的分辨率。屏幕分辨率越高，所呈現(xiàn)的色彩越多，清晰度越高。
結(jié)論：
1. 像素的單位本質(zhì)上是：個(gè)數(shù)，100像素你可以理解成你有100個(gè)手電筒；
2. 同樣大小(比如1cm*1cm大小的矩形)，里面的像素越多，畫(huà)面越清晰；
三．css像素
在pc端1css像素相當(dāng)于1物理設(shè)備像素。
思考：
我們的手機(jī)分辨率是640*1136(iphone 5和iphone 5s的物理設(shè)備分辨率)，如果我們打開(kāi)一個(gè)純粹pc端的網(wǎng)站會(huì)出現(xiàn)什么情況?
(比如jumei.com,min-width是1090px,在pc端的我的電腦的設(shè)備寬度是1280,通過(guò)screen.width進(jìn)行檢測(cè))
我們會(huì)發(fā)現(xiàn)網(wǎng)站會(huì)縮小到我們可以看到整個(gè)網(wǎng)站(www.jubi.com)
則會(huì)發(fā)現(xiàn)，有滾動(dòng)條了,因?yàn)榻箍s放了
四． dpr
1個(gè)css像素占多少物理設(shè)備像素
思考：iphone 5或者iphone 5s一屏幕能看到的極限是多少寬度?
應(yīng)該是320(這是默認(rèn)的可視區(qū)的css寬度) * 2 = 640px
以上，我們學(xué)習(xí)完了所有關(guān)于移動(dòng)端布局相關(guān)的概念，接下來(lái)，我們來(lái)聊一聊布局的思路。
假如我們有640px的設(shè)計(jì)稿，我們?nèi)绾尾拍茏層脩羧靠吹侥?
思路一：百分比布局
把尺寸除以2，比如我們量出來(lái)的是640px ---> 實(shí)際上我們只寫(xiě)320px；
如果是iphone 6怎么辦? iphone 6的寬度是375px；
由于320和375的寬度其實(shí)差別不大，我們可以不定寬度,也就是把整體寬度設(shè)定為100%，然后其他的全部量出來(lái)是多少。
布局方法
- 拿到設(shè)計(jì)師給我們的設(shè)計(jì)稿之后(推薦640px),把所有量出來(lái)的尺寸除以2即可
- 遇到等分就用百分比
- 左浮動(dòng) + 右浮動(dòng)(導(dǎo)航部分實(shí)現(xiàn)、折扣推薦導(dǎo)航部分) --> 適合于所有的元素寬度固定的
- 左浮動(dòng) + padding擠(見(jiàn)超值折扣推薦內(nèi)容部分) 本質(zhì)上元素大小在任何尺寸下面都是一致，改變的其實(shí)是元素與元素之間的間距大小 --> 適合一個(gè)元素寬度固定，另一個(gè)寬度自適應(yīng)；
網(wǎng)站示例
http://m.duba.com/
http://m.lagou.com/
百分比布局的缺點(diǎn)
在大屏幕的手機(jī)下顯示效果會(huì)變成有些頁(yè)面元素寬度被拉的很長(zhǎng)，但是高度還是和原來(lái)一樣，實(shí)際顯示非常的不協(xié)調(diào)，這就是流式布局的最致命的缺點(diǎn)，往往只有幾個(gè)尺寸的手機(jī)下看到的效果是令人滿意的，其實(shí)很多視覺(jué)設(shè)計(jì)師應(yīng)該無(wú)法接受這種效果，因?yàn)樗麄兊脑O(shè)計(jì)圖在大屏幕手機(jī)下看到的效果相當(dāng)于是被橫向拉長(zhǎng)來(lái)一樣。流式布局并不是最理想的實(shí)現(xiàn)方式，通過(guò)大量的百分比布局，會(huì)經(jīng)常出現(xiàn)許多兼容性的問(wèn)題，還有就是對(duì)設(shè)計(jì)有很多的限制，因?yàn)樗麄冊(cè)谠O(shè)計(jì)之初就需要考慮流式布局對(duì)元素造成的影響，只能設(shè)計(jì)橫向拉伸的元素布局，設(shè)計(jì)的時(shí)候存在很多局限性。
思路二:rem布局
如何理解rem布局？
思考一個(gè)問(wèn)題，假如我們的設(shè)計(jì)稿是750px,我們量出來(lái)一個(gè)盒子的寬度是75px,那么在640px下面，它應(yīng)該是多少合適呢? 答案是:64
問(wèn)題，如果才能保證你寫(xiě)的css的尺寸只需要寫(xiě)一次，在不同的屏幕尺寸下面不用改?
假如我們?cè)?50px下面，我們讓html的font-size為75,則這個(gè)盒子的寬度是1rem,在640px下面我們讓html的font-size為64,則這個(gè)盒子的寬度也是1rem，問(wèn)題就這樣解決了。
那么實(shí)際開(kāi)發(fā)中，該用什么樣等布局思路？
我們打開(kāi)m.jd.com,m.vip.com，會(huì)發(fā)現(xiàn)，實(shí)際上沒(méi)有一個(gè)網(wǎng)站用了純粹的百分比或者rem布局，經(jīng)常會(huì)發(fā)現(xiàn)各種布局思路混在一起，因?yàn)闆](méi)有一套布局思路能夠通用保證不出問(wèn)題
為什么rem不是萬(wàn)能的?
比如1px，如果我們?cè)赿pr是2的情況下就會(huì)變得很粗，我們知道那并不是真正的1像素。
推薦布局思路——使用由阿里出品的lib-flexible庫(kù)。
網(wǎng)址：https://github.com/amfe/lib-flexible；
該如何使用呢？
1. 引入布局用的flexible.js要注意的是不要再寫(xiě)meta:viewport標(biāo)簽了，因?yàn)閒lexible.js會(huì)自動(dòng)幫你創(chuàng)建；
2. 引入base.css；
3. 把設(shè)計(jì)師的設(shè)計(jì)稿拿過(guò)來(lái)，標(biāo)注稿基準(zhǔn)字體大小 = 標(biāo)注稿寬度 / 10，如標(biāo)注稿寬為750，標(biāo)注稿基準(zhǔn)字體大小為75；標(biāo)注稿寬為640，標(biāo)注稿基準(zhǔn)字體大小為64；
4. 除了字體大小以外，其他所有的均按rem來(lái)，比如你的設(shè)計(jì)稿是750px的，那么，假如你量出來(lái)的是75px,則是1rem；
字體除外，要根據(jù)不同的dpr設(shè)置不同的大小，比如如果是750的設(shè)計(jì)稿，那么字體假如是24px,則在dpr為1的情況下是16px,dpr2的情況下是24px,dpr3的情況下是32px(這塊涉及到字體專(zhuān)業(yè)知識(shí)，總結(jié)一句話就是沒(méi)有人會(huì)考慮用奇數(shù)字體，https://www.zhihu.com/question/20440679，所以不能讓工具幫我們自動(dòng)算，得寫(xiě)死。
以上是我個(gè)人關(guān)于移動(dòng)端布局的一些總結(jié)。如有不妥的地方，還請(qǐng)指正。
最后附上關(guān)于移動(dòng)端常見(jiàn)問(wèn)題當(dāng)網(wǎng)址：
