響應式網頁設計-Responsive Web Design
CSS 單位
目前CSS的語法，常用的尺寸單位有：px、em、rem、%(百分比)、cm(公分)、in(英吋)、pt……等。
1.px：像素，作為目前最常使用的尺寸單位，相信大家都不陌生。 1px(像素)理論上就是螢幕中最小的一點，而在css裡代表是絕對尺寸，意指不會被上層的大小所影響。
2.em：會隨著上層所設定的大小調整，同樣的1.1em在不同的父元素之下可能會有不同的尺寸。
3.rem：是新的單位，他和CSS3中,用法類似於em，差別在於他不會受到上層的父元素影響只會受最根部的單位影響。 “font size of the root element”–在W3C官網中是如此描述rem，但缺點與大多CSS3一樣，IE若是版本太舊，則不支援這項功能，目前是IE9以上的瀏覽器支援，若以下的IE瀏覽器，可能就需要另尋方法了！
4.%：百分比。
5.cm、in:公分、英吋，這些單位主要是用來列印到紙張，但隨大眾使用習慣的改變，這些單位也消失於CSS中了!
6.pt：Point，1pt 等于 1/72 英寸，就像在 Word 裡面設定字體的級數，9級字就是 9pt, 12級字就是 12 pt，但在近幾年也很少用到了。
新的尺寸單位
vw & vh：view width & view height。 指為螢幕可視範圍高度、寬度的”百分比”，只受到裝置畫面的寬高度影響，不受父元素的影響，而且很重要的是，這個單位會隨著瀏覽器的縮放而改變，這使得在設計RWD(響應性網頁)時會更加簡便。
About the author
D.L Multimedia 前端網頁設計師
Related posts
