響應式佈局（2）-- 設計稿750px

rem相關

(function () {
　　　function changeRootFont() {
　　　   var designWidth = 750, rem2px = 100;
　　　   document.documentElement.style.fontsize = 
　　　  ((window.innerWidth / designWidth) * rem2px) + 'px';
　　　  //iphone6: (375 / 750) * 100 + 'px';
　　　}
　　　changeRootFont();
　　　window.addEventListener('resize', changeRootFont,false);
})();

這是網上摘抄的一段代碼，其中innerWidth是設備獨立像素：

也叫做邏輯像素(對於前端來說，和我們的css像素是一樣的)，這個不同的設備是不一樣的。在viewport爲ideal-viewport模式時， 如iphone6此時的viewport爲375px，代表着我們在css中寫375px就可以達到全屏的效果；

關於像素和視口可看上一篇博客

移動端適配（1）-- 像素和視口。

代碼裏面，“我們通過動態的獲取設備獨立像素，然後除以設計稿的寬度，賦給根字體的fontsize，來動態改變根字體大小，做到自適應。但至於爲什麼要乘100，首先375 / 750是0.5，瀏覽器默認最小字體爲12px，所以我們需要放大一些，而100又很好算，我們只需要將設計稿量出來的長度（px），小數點向左移2位，單位變成rem就好了。
所以說，rem相當於爲我們做了物理像素與css像素之間的轉換。所以設計稿直接給物理像素的就好了。假如設備獨立像素爲750，和設計稿一致，這時候的根字體大小就是750 / 750 * 100 =100px，設計稿上面標20px我們直接小數點左移2位，0.2rem即可。假如設備獨立像素爲375px，這時候的根字體爲375 / 750 * 100 = 50px，0.2rem正好爲10px，也正符合設備由750到375縮小兩倍的比例。這樣就是完成適配了吧。（結合紅色的字一起看）

這篇文章也差不多是這個做法，快速做移動端適配，可以多體會一下，我覺得我已經由完全懵變得有一點感覺了^_^。

https://segmentfault.com/a/1190000007276635