響應式網頁設計-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(響應性網頁)時會更加簡便。