幾種常見的長度單位整理
VW
相對於視口的寬度。視口被均分爲100單位的vw
屏幕寬375px,1vw=3.75px;
VH
相對於視口的高度。視口被均分爲100單位的vh
屏高1200px,1vh=12px;
VMAX/VMIN
相對於視口的寬度或高度中較大/小的那個。其中最大/小的那個被均分爲100單位的vmax/vmin
唯一需要注意的是不支持Android 4.3（其它移動端可忽略）
最新安卓系統分佈（2016.8）
| Version | Codeame | API | Distribution |
|---|---|---|---|
| 2.2 | Froyo | 8 | 0.1% |
| 2.3.3-2.3.7 | Gingerbread | 10 | 1.7% |
| 4.0.3-4.0.4 | Ice Cream Sandwich | 15 | 1.6% |
| 4.1.x | Jelly Bean | 16 | 6.0% |
| 4.2.x | Jelly Bean | 17 | 8.3% |
| 4.3 | Jelly Bean | 18 | 2.4% |
| 4.3 | KitKat | 19 | 29.2% |
| 5.0 | Lollipop | 21 | 14,1% |
| 5.1 | Lollipop | 22 | 21.4% |
| 6.0 | Marshmallow | 23 | 15.2% |
考慮Android4.3,可兩者混用
.test{
font-size:12px;
font-size:3.2vw;//12*2/750*100vw，假設設計圖爲750px,設計圖字體爲24px
}@supports
test{
font-size:12px;
@supports(font-size:1vw){
font-size:3.2vw;
}
}sass
test{
font-size:12px;
@supports(font-size:1vw){
font-size:12*2/750*100vw；
}
}複用
@function pxToVw($px) {
@return $px / 750 * 100vw;
}
test{
font-size:12px;
@supports(font-size:1vw){
font-size: pxToVw（24）；
}
}@supports：
不支持Android 4.3和ios8
ios系統分佈，不包括ios10（2016.7）
| IOS9 | IOS8 | Earlier |
|---|---|---|
| 86% | 11% | 3% |
ios8以下可以忽視
Rem
相對長度單位。相對於根元素(即html元素)font-size計算值的倍數
默認1rem=16PX
html{
font-size:18px;
}
//正常爲1rem=18px;如屏幕寬度不大於300px,1rem=12px;
@media screen and (max-width: 300px){
html{
font-size:12px;
}
}或者
window.onresize = function(){
document.getElementsByTagName('html')[0].style.fontSize
= document.body.scrollWidth/20+'px';
}CH
數字“0”的寬度
兼容問題
不支持安卓4.3
一個例子就懂了
EM
CSS3前就有，所有瀏覽器都支持，國外常見
相對長度單位。相對於當前對象內文本的字體尺寸。
如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
可以指定到小數點後三位，比如“1.234em”
- 相對的計算必然會一個參考物，那麼這裏相對所指的是相對於元素父元素的font-size。
- 比如說：如果在一個
<div>設置字體大小爲“16px”，此時這個<div>的後代元素教程了是將繼承他的字體大小，除非重新在其後代元素中進行過顯示的設置。此時，如果你將其子元素的字體大小設置爲“0.75em”，那麼其字體大小計算出來後就相當於“0.75 X 16px = 12px”； - 如果用戶通過瀏覽器的UI控件改變了文字的大小，那麼我們整個頁面也會進行放大（或縮小）
<body style='font-size:14px;'>
<ul style='font-size:18px;'>
<li style='font-size:22px;'>
<p style='font-size:1em;'>1em[22px]</p>
</li>
<li style='font-size:2em'>
<p style='font-size:1em;'>1em[36px]</p>
</li>
<li>
<p style='font-size:1em;'>1em[18px]</p>
</li>
</ul>
</body>THE END
