Values and Units(計量單位介紹) | CSS
2023/12/25
CSS 計量單位分為絕對單位和相對單位，許多人因為使用錯誤的單位，常常導致在RWD(響應式)中畫面發生顯示元素錯誤
CSS 計量單位，例如百分比、像素和 em 單位。學會如何使用這些工具才能精確控制佈局、大小和間距。無論你是設計愛好者還是CSS 初心者，掌握 CSS 絕對單位和相對單位將使你能夠打造完美的RWD(響應式)網站。
CSS 絕對單位
| 單位 | 名稱 | 等價換算 |
|---|---|---|
| cm | 公分(centimeters) | 1cm = 37.8px = 25.2/64in |
| mm | 毫米(millimeter) | 1mm = 1/10th of 1cm |
| in | 英吋(Inches) | 1in = 2.54cm = 96px |
| pc | 派卡(Picas) | 1pc = 1/6th of 1in |
| pt | 點數(Points) | 1pt = 1/72nd of 1in |
| px | 像素(Pixels) | 1px = 1/96th of 1in |
CSS 相對單位
html 默認的font-size是16px
| 符號 | 說明 |
|---|---|
| % | 針對父元素 |
| em | 針對父元素的font-size |
| rem | 針對根元素的font-size |
| vw | 針對視窗寬度的1% |
| vh | 針對視窗高度的1% |