css單位有：px，em，rem，vh，vw，vmin，vmax，ex，ch 等等
1、px單位最常見，也最直接，這裡不做介紹。
2、em：em的值並不是固定，它繼承父級元素的字型大小，所以層數越深字型越大。
1view code<
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
>
3、rem：rem是css3新增的乙個相對單位，與em不同的一點是rem相對於根元素(html)字型大小。tip：瀏覽器預設字型大小是16px。
1view code<
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
>
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-*這樣的類名。
1view codevar viewport =,
7 resetimagescale : function
() \n\
15 ';
16 imagescalestyle.innerhtml =inertcss;
1718
},19 init : function
() );26}
27 };
CSS 單位 絕對單位 相對單位
我們對單位很熟悉，比如說，千克，千公尺，公尺等，這些就是絕對單位，我們又有聽到太陽的質量等於33個地球，這個就是相對單位。在css中，單位也可以分為這兩類。在第二個box裡,300px的小框跟上面的框的300px一樣長，而第二個框裡面的50 跟第乙個框的50 為不一樣，這個就很好的解釋了相對單位和絕...
常用css單位
div中的字型大小是1.2em，也就是div從父類元素繼承的字型大小的1.2倍。在這裡，body的字型是14px，那麼div的字型大小是1.2 14 16.8px.注意 用em一層一層級聯得定義巢狀元素的字型大小 解決方法就是 em 換做 rem rem rem中的r代表根元素，它的值就是根元素設定...
CSS單位（字型）
px px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。emem是相對長度單位。相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。引自css2.0手冊 任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合 1em...