css單位盤點

css單位有：px，em，rem，vh，vw，vmin，vmax，ex，ch 等等

1、px單位最常見，也最直接，這裡不做介紹。

2、em：em的值並不是固定，它繼承父級元素的字型大小，所以層數越深字型越大。

1
<
body 
style
="font-size:16px;"
>
2hello - font-size:16px
3<
div 
style
="font-size:1.5em;"
>
4hello 01 - font-size:24px
5<
div 
style
="font-size:1.5em;"
>
6hello 02 - font-size:36px
7div
>
8div
>
9body
>

view code

3、rem：rem是css3新增的乙個相對單位，與em不同的一點是rem相對於根元素(html)字型大小。tip：瀏覽器預設字型大小是16px。

1
<
body
>
2hello - font-size:16px
3<
div 
style
="font-size:1.5rem;"
>
4hello 01 - font-size:24px
5<
div 
style
="font-size:1.5rem;"
>
6hello 02 - font-size:24px
7div
>
8div
>
9body
>

view code

4、vh 和 vw

在進行響應式布局時，我們常常會使用百分比來布局，然而css的百分比不總是解決每個問題的最佳方案，css的寬度相對於離它最近的父元素的寬度。如果你想使用視口的寬度、高度而不是父元素的寬高，可以使用vh和vw單位。 1vh = viewportheight /100; 1vw = viewportwidth /100; 使用vh、vw就可以保證元素的寬高適應不同裝置。

5、vmin 和 vmax

vw和vh對應於viewport的width和height，而vmin和vmax分別對應於width、height中的最小值和最大值，例如如果瀏覽器的寬/高為1000px/600px，那麼 1vmin = 600 /100; vmax = 1000 /100;

6、ex 和 ch

ex、ch單位與em、rem相似之處在於都依賴於font-size，但是ex、ch還依賴於font-family，基於font-specific來計算。

不同大小螢幕手機的乙個自適應策略：

先引入viewport.js（執行viewport.init();），字型用rem單位（需 /100），需要自適應的圖示加上icon-*這樣的類名。

1
var viewport =,
7     resetimagescale : function
() \n\
15         ';
16         imagescalestyle.innerhtml =inertcss;
1718
},19     init : function
() );26}
27 };

view code

css單位盤點

CSS 單位絕對單位相對單位

常用css單位

CSS單位（字型）

css單位盤點

CSS 單位 絕對單位 相對單位

常用css單位

CSS單位（字型）

相關推薦

CSS 單位絕對單位相對單位