淺談移動端布局問題-創(chuàng)新互聯(lián)

移動端推廣速度快，效果好，越來越多的企業(yè)，商家開始重視移動站的建設和移動頁面（h6）的制作。隨著移動頁面的玩法越來越多，對前端技術的要求也會越來越高。
選擇合適的布局，是寫好移動頁面的第一步。今天我們就來談談移動端的布局問題。

創(chuàng)新互聯(lián)2013年至今，先為臨澤等服務建站，臨澤等地企業(yè)，進行企業(yè)商務咨詢服務。為臨澤企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

為什么移動端布局如此混亂？這是由多方的原因造成的。
1.css這套技術系統(tǒng)本身十分混亂，基本上可以說毫無規(guī)律可言，依賴于技術人員的熟練程度而不是邏輯更多一些；
2．css歷經了多個時代的升級，每一次升級之后，新的技術標準和舊的基本上沒有任何關聯(lián)。比如：table布局，div+css布局，flex布局，grid布局等；
3.手機終端市場的混亂。當前市場上手機的尺寸五花八門；加上由iphone的retina技術帶來的dpr的混亂；

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

二．屏幕分辨率
屏幕分辨率是屏幕每行的像素點數(shù)*每列的像素點數(shù)，每個屏幕有自己的分辨率。屏幕分辨率越高，所呈現(xiàn)的色彩越多，清晰度越高。
結論：

像素的單位本質上是：個數(shù)，100像素你可以理解成你有100個手電筒；
同樣大小(比如1cm*1cm大小的矩形)，里面的像素越多，畫面越清晰；

三．css像素
在pc端1css像素相當于1物理設備像素。
思考：
我們的手機分辨率是640*1136(iphone 5和iphone 5s的物理設備分辨率)，如果我們打開一個純粹pc端的網站會出現(xiàn)什么情況?
(比如jumei.com,min-width是1090px,在pc端的我的電腦的設備寬度是1280,通過screen.width進行檢測)
我們會發(fā)現(xiàn)網站會縮小到我們可以看到整個網站(www.jubi.com)
則會發(fā)現(xiàn)，有滾動條了,因為禁止縮放了

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

以上，我們學習完了所有關于移動端布局相關的概念，接下來，我們來聊一聊布局的思路。

假如我們有640px的設計稿，我們如何才能讓用戶全部看到呢?
思路一：百分比布局
把尺寸除以2，比如我們量出來的是640px ---> 實際上我們只寫320px；
如果是iphone 6怎么辦? iphone 6的寬度是375px；
由于320和375的寬度其實差別不大，我們可以不定寬度,也就是把整體寬度設定為100%，然后其他的全部量出來是多少。
布局方法

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

百分比布局的缺點
在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度還是和原來一樣，實際顯示非常的不協(xié)調，這就是流式布局的最致命的缺點，往往只有幾個尺寸的手機下看到的效果是令人滿意的，其實很多視覺設計師應該無法接受這種效果，因為他們的設計圖在大屏幕手機下看到的效果相當于是被橫向拉長來一樣。流式布局并不是最理想的實現(xiàn)方式，通過大量的百分比布局，會經常出現(xiàn)許多兼容性的問題，還有就是對設計有很多的限制，因為他們在設計之初就需要考慮流式布局對元素造成的影響，只能設計橫向拉伸的元素布局，設計的時候存在很多局限性。

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

那么實際開發(fā)中，該用什么樣等布局思路？
我們打開m.jd.com,m.vip.com，會發(fā)現(xiàn)，實際上沒有一個網站用了純粹的百分比或者rem布局，經常會發(fā)現(xiàn)各種布局思路混在一起，因為沒有一套布局思路能夠通用保證不出問題

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

引入布局用的flexible.js要注意的是不要再寫meta:viewport標簽了，因為flexible.js會自動幫你創(chuàng)建；
引入base.css；
把設計師的設計稿拿過來，標注稿基準字體大小 = 標注稿寬度 / 10，如標注稿寬為750，標注稿基準字體大小為75；標注稿寬為640，標注稿基準字體大小為64；
除了字體大小以外，其他所有的均按rem來，比如你的設計稿是750px的，那么，假如你量出來的是75px,則是1rem；
字體除外，要根據(jù)不同的dpr設置不同的大小，比如如果是750的設計稿，那么字體假如是24px,則在dpr為1的情況下是16px,dpr2的情況下是24px,dpr3的情況下是32px(這塊涉及到字體專業(yè)知識，總結一句話就是沒有人會考慮用奇數(shù)字體，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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：淺談移動端布局問題-創(chuàng)新互聯(lián)
分享地址：http://muchs.cn/article36/hidsg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、自適應網站、營銷型網站建設、網站收錄、網站建設、網站排名

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容