設(shè)備像素(device pixel): 設(shè)備像素是物理概念，指的是設(shè)備中使用的物理像素。 比如iPhone 5的分辨率640 x 1136px痴鳄。
CSS像素(css pixel): CSS像素是Web編程的概念柏卤，指的是CSS樣式代碼中使用的邏輯像素。 在CSS規(guī)范中抖拴，長度單位可以分為兩類燎字，絕對(absolute)單位以及相對(relative)單位。px是一個相對單位阿宅，相對的是設(shè)備像素(device pixel)候衍。
設(shè)備像素縮放比(device pixel ratio)：
1px = (dpr)2
- dp
比如iPhone 5使用的是Retina視網(wǎng)膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel洒放，所以設(shè)備像素數(shù)為640 x 1136px蛉鹿，而CSS邏輯像素數(shù)為320 x 568px。
參考鏈接： 前端工程師需要明白的「像素」 需要先弄清楚設(shè)備像素比了再往下看
動態(tài) REM(僅以手機為例)
淘寶在用的手機頁面方案（不是響應(yīng)式方案） REM
是基于根元素html{font-zise： pageWidth;}
pageWidth
是頁面的寬度,可以通過這個API
獲取到document.documentElement.clientWidth
也就是說讓1rem–>pageWidth往湿，div{width: 0.5rem},div{font-size: 0.05rem;} 下面是構(gòu)造的代碼
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
var pageWidth = document.documentElement.clientWidth
var style = document.createElement('style')
var content = 'html{font-size:'+pageWidth+'px;}'
style.innerHTML = content
document.head.appendChild(style)
</script>
</head>
<body>
<div class="half"></div>
<div class="full">hello world</div>
</body>
打開控制臺看到下面截圖中的妖异，構(gòu)造成功
上CSS代碼
*{margin: 0; padding: 0;}
.half{
width: 0.5rem;
height: 0.5rem;
background: red;
}
.full{
width: 1rem;
height: 1rem;
background: blue;
}
在電腦上面查看時，會看到寬度會存在一些差異领追；造成這樣的原因是滾動條他膳，它是html的，而不是body的,暫時還沒有想到能獲取不包含滾動條的方法 在手機上面是不會有滾動條出現(xiàn)的蔓腐，滾動條是自己感知的
如果手機頁面的寬度定為640px矩乐，字體是32px，換算成rem回论，32/640 =0.05rem 有點繁瑣散罕，能不能讓640rem–>100%? 假設(shè) 1rem –> 1000px(屏幕寬度) 640rem –> 1000px; ==> 1rem –> 1000/640
html
<body>
<div class="half"></div>
<div class="full">hello world</div>
</body>
css
.full{
width: 640rem;
height: 640rem;
background: blue;
font-size: 32rem;
}
js
<script>
var pageWidth = document.documentElement.clientWidth //1000
var style = document.createElement('style')
var content = 'html{font-size:'+pageWidth/640+'px;}'
style.innerHTML = content
document.head.appendChild(style)
</script>
運行之后會在頁面下方看到有滾動條出現(xiàn)
.full
的寬度達(dá)到了7680px 。傀蓉。欧漱。
html
里面的font-size
小于12px
<style>html{font-size:0.8578125px;}</style>
結(jié)論： 1. 在PC上面瀏覽器默認(rèn)字體大小是12px,若小于12px會自動提升到12px； 2. PC上 1rem 的值不要小于12px 葬燎，手機上面不會有這樣的限制
解決方案： 只要讓 1rem >= 12px 就行了 把這段代碼少除以一個10误甚，相應(yīng)的css代碼也一樣
var content = 'html{font-size:'+pageWidth/640+'px;}'
若還是小于則再除以一個2 對于程序員而言16是個整數(shù)缚甩，2^4 除以什么數(shù)和設(shè)計稿有關(guān)，若是720px窑邦，除以的數(shù)最好可以和720有關(guān)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
var pageWidth = document.documentElement.clientWidth //1000
var style = document.createElement('style')
var content = 'html{font-size:'+pageWidth/16+'px;}'
style.innerHTML = content
document.head.appendChild(style)
</script>
</head>
<body>
<div class="half">hello world hello world hello world</div>
<div class="half">hello world hello world hello world</div>
</body>
</html>
//css代碼
*{margin: 0; padding: 0;box-sizing:border-box;}
.half{
width: 8rem;
height: 4rem;
background: red;
border: 1px solid black;
float: left;
}
/*
*推理
*16rem-->100%
*8rem-->50%
*所以在任何設(shè)備上刷新都可以看到.half占頁面寬度的一半
*/
完整代碼展示
為了解決rem在進行單位換算上的麻煩問題抹蚀，設(shè)置html字體大小為font-size:62.5%盲再，默認(rèn)字體大小是16px， 即是16px*62.5%=10px；1rem=10px攒读； 比如1.2rem=12px,1.4rem=14px,1.6rem=16px.
