剛入前端坑的時候就是使用百分比布局，覺得百分比布局可以解決移動端的響應式布局問題，但是圖樣圖森破，最常見的情況莫過於設計師說：「你沒有按照我的設計稿來做呀」然後就是設計師在我旁邊，我們一起開始調整位置….
之後我學會了，基本上都是按照設計稿的位置來的（將設計稿縮放成chrom響應式中那麼大，然後兩個重疊開始比對位置= =），然後設計師再也沒有說過位置不對了…但是身為乙個程式設計師，這樣做好丟人呀，設計師說這裡再大一點小一點的時候我都直接說，你給我修改好的設計稿！
使用百分比布局還會出現乙個問題，就是當某些需要高度固定的部分會因為使用百分比然後不同解析度會有誤差。
很明顯，百分比布局還原設計稿能力還是有限。
在做移動開發的時候很多人都會加上viewport的配置，
那麼固定裝置寬度的布局就是根據這個來設定的，將viewport裡面的寬度width設定成設計稿的寬度，也就是說原本是width=device-width，即寬度為裝置的寬度，假如在iphone6上顯示的時候，那麼頁面的寬度就是375px; 當我們將width設定成設計稿的寬度的，假如設計稿是750px，而我們的css也按設計的尺寸來做，例如乙個是200px*200px，那麼在css上也是寬高都是寫200px,也就是1：1的比例。那麼在375px的手機上顯示的時候，就會縮小2倍顯示，以此類推，在320px的寬度的時候，就會縮小2.3倍顯示，在414px的寬度的時候就會縮小1.8倍。
這樣的寫法是會比較好的還原設計稿，而且速度也會比較快，但是這樣也有缺點，在縮》小的時候有些裝置會比較模糊，因為你強行將裝置放大了。
使用rem布局結合在html上根據不同解析度設定不同font-size有很多不好解決的麻煩。
頁面上html的font-size不是預先通過媒介查詢在css裡定義好的，而是通過js計算出來的，所以當解析度發生變化時，html的font-size就會變，不過這得在你調整解析度後，重新整理頁面才能看得到效果。你看**就知道為啥font-size是直接寫到html的style上面的了
它是根據什麼計算的，這就跟設計稿有關了，拿網易來說，它的設計稿應該是基於iphone4或者iphone5來的，所以它的設計稿豎直放時的橫向解析度為640px，為了計算方便，取乙個100px的font-size為參照，那麼body元素的寬度就可以設定為width: 6.4rem，於是html的font-size=devicewidth / 6.4。這個devicewidth就是viewport設定中的那個devicewidth。
視口做如下設定：
name="viewport"
content="initial-scale=1,maximum-scale=1, minimum-scale=1">
(function
() , false);
window.onresize = function
();})();
@function
px2rem
($x)
#translatebtn移動端響應式布局
1.快捷鍵 meta vp tab鍵 2.viewport視口 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這個頁面的區域一共有多寬 瀏覽器...
移動端響應式布局基礎
搭建乙個h5頁面，我們需要在head中新增乙個meta標籤 快捷鍵 meta vp tab鍵 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這...
移動端與響應式布局
瀏覽器切換裝置步驟 f12開啟控制台，如圖 viewport只針對於移動端，pc端無效 viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable 0 content的配置 width d...