瀏覽器的兼容性越來越好，移動端基本是清一色的webkit，經常會用到css的不同尺寸/長度單位，這里做個整理。
概覽
絕對單位
px: Pixel 像素 pt: Points 磅 pc: Picas 派卡 in: Inches 英寸 mm: Millimeter 毫米 cm: Centimeter 厘米 q: Quarter millimeters 1/4毫米相對單位
%: 百分比 em: Element meter 根據文檔字體計算尺寸 rem: Root element meter 根據根文檔（ body/html ）字體計算尺寸 ex: 文檔字符“x”的高度 ch: 文檔數字“0”的的寬度 vh: View height 可視范圍高度 vw: View width 可視范圍寬度 vmin: View min 可視范圍的寬度或高度中較小的那個尺寸 vmax: View max 可視范圍的寬度或高度中較大的那個尺寸運算
calc: 四則運算
實例：
| h1 { width: calc(100% - 10px + 2rem);} |
單位比例
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
詳細
絕對單位
px - Pixel 像素
像素 px 相對于設備顯示器屏幕分辨率而言。
| div { font-size: 12px }p { text-indent: 24px } |
pt Points 磅
1 pt = 1/72 英寸
| div { font-size: 10pt }p { height: 100pt } |
pc Picas 派卡
十二點活字（印刷中使用的），相當于我國新四號鉛字的尺寸。
| div { font-size: 10pc }p { height: 10pc } |
in Inches 英寸
| div { font-size: 10in }p { height: 10in } |
mm Millimeter 毫米
| div { font-size: 10mm }p { height: 10mm } |
cm Centimeter 厘米
| div { font-size: 10cm }p { height: 10cm } |
q Quarter millimeters 1/4毫米
| div { font-size: 20q }p { height: 100q } |
相對單位
% 百分比
相對于父元素寬度
| <body> <div class="parent"> <div class="children"></div> </div></body><style>.parent { width: 100px }.children { width: 66.6% }/* children的寬度為 66.6px */</style> |
em Element meter 根據文檔計算尺寸
相對于當前文檔對象內文本的字體尺寸而言，若未指定字體大小則繼承自上級元素，以此類推，直至 body，若 body 未指定則為瀏覽器默認大小。
| <body> <div class="element"></div></body><style>body { font-size: 14px;}.element { font-size: 16px; width: 2em; /* 2em === 32px */}</style> |
rem Root element meter 根據根文檔（ body/html ）字體計算尺寸
相對于根文檔對象（ body/html ）內文本的字體尺寸而言，若未指定字體大小則繼承為瀏覽器默認字體大小。
新聞熱點
疑難解答
