px轉為rem
rem是一個單位，相對於html的fontsize而言。經常用來適配移動端頁面
邏輯畫素：軟體所能達到的解析度，我們開發實際使用的解析度，eg：320X568
物理畫素（裝置畫素）：裝置實際的畫素，就是我們平時買手機說的解析度，是設計人員使用的解析度，eg：640X1136
邏輯畫素和物理畫素之間存在一個縮放因子，有興趣的可以去看看retina屏。
雖然移動端和pc端都是單位都是px，但是這兩個px卻是不同的，前者是邏輯畫素，後者是物理畫素。
|
裝置 蘋果手機 |
寬 寬度 |
高 高度 |
對角線 對角線 |
邏輯解析度（點） |
比例因子 |
裝置解析度（畫素） |
PPI |
|
3GS |
2.4英寸（62.1毫米） |
4.5英寸（115.5毫米） |
3.5英寸 |
小320x480 |
@ 1X |
小320x480 |
163 |
|
4（S） |
2.31英寸（58.6毫米） |
4.5英寸（115.2毫米） |
3.5英寸 |
小320x480 |
@ 2倍 |
640×960 |
326 |
|
5C |
2.33英寸（59.2毫米） |
4.90英寸（124.4毫米） |
4英寸 |
320x568 |
@ 2倍 |
640x1136 |
326 |
|
5（S） |
2.31英寸（58.6毫米） |
4.87英寸（123.8毫米） |
4英寸 |
320x568 |
@ 2倍 |
640x1136 |
326 |
|
6 |
2.64英寸（67.1毫米） |
5.44英寸（138.3毫米） |
4.7英寸 |
375x667 |
@ 2倍 |
750x1334 |
326 |
|
6+ |
3.07英寸（77.9毫米） |
6.23英寸（158.2毫米） |
5.5英寸 |
414x736 |
@ 3倍 |
（1242x2208- >） 1080×1920 |
401 |
我們現在一般設計圖一般基於iphone的，一般是640或750，fonsize是40px。
要使用rem，可以分為兩步
1). 計算出html的fontsize：（按640設計稿）------- 這段程式碼應該放在body之前，因為應該在渲染頁面之前就計算好，避免出現閃爍問題。
<script>
function adjustFontsize() {
var docEle = document.documentElement;
var width = (screen.width > 0) ? (window.innerWidth >= screen.width || window.innerWidth == 0) ? screen.width :
window.innerWidth : window.innerWidth;
if (width) {
width = Math.min(width, 750);
docEle.style.fontSize = 20 * (width / 320) + 'px';
}
}
var evt = 'onorientationchange' in window ? 'orientationchange' : 'resize';
window.addEventListener(evt, adjustFontsize, false);
adjustFontsize();
</script>可以使用sublime的外掛cssrem，調整下fontsize
可以使用scss的函式功能實現
@function rem($target, $context: 40px) {
@return ($target / $context) * 1rem;
}使用的時候
padding: rem(10px) 0;