該篇文章首發於我的個人部落格：http://cherryblog.site/ 使用github+coding+hexo搭建的靜態部落格，更多文章請移步至我的個人部落格

一、百分比佈局

剛入前端坑的時候就是使用百分比佈局，覺得百分比佈局可以解決移動端的響應式佈局問題，但是圖樣圖森破，最常見的情況莫過於設計師說：“你沒有按照我的設計稿來做呀”然後就是設計師在我旁邊，我們一起開始調整位置….

之後我學會了，基本上都是按照設計稿的位置來的（將設計稿縮放成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佈局

基礎知識參考以下兩篇部落格：

http://www.w3cplus.com/css3/d…
使用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。

視口做如下設定：

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

1 用js根據螢幕解析度動態生成fontsize：

(function () {
   document.addEventListener('DOMContentLoaded', function () {
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 10 + 'px';
   }, false);
window.onresize = function(){
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 70 + 'px';
};
})();

2、利用sass設定px和rem互相轉化的函式

@function px2rem($x) {
  @return $x / 108 * 1rem; //按1080的設計稿，統一寬度10rem;
}

3、在我們設定長度的時候就可以直接用設計稿上標註的長度了

#translateBtn{
  @include base-style(px2rem(53), px2rem(919), px2rem(94))
}