10mm等于多少cm（CSS中的尺寸單位）

瀏覽器的兼容性越來越好，移動端基本是清一色的webkit，經常會用到css的不同尺寸/長度單位，這里做個整理。概覽絕對單位px:Pixel像素pt:Points磅pc:Picas派卡in:Inches英寸mm:Millimeter毫米cm:

瀏覽器的兼容性越來越好，移動端基本是清一色的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 }

相對單位

% 百分比

相對于父元素寬度

em Element meter 根據文檔計算尺寸

相對于當前文檔對象內文本的字體尺寸而言，若未指定字體大小則繼承自上級元素，以此類推，直至 body，若 body 未指定則為瀏覽器默認大小。

rem Root element meter 根據根文檔（ body/html ）字體計算尺寸

相對于根文檔對象（ body/html ）內文本的字體尺寸而言，若未指定字體大小則繼承為瀏覽器默認字體大小。

ex 文檔字符“x”的高度

相對于字符“x”的高度，通常為字體高度的一半，若未指定字體尺寸，則相對于瀏覽器的默認字體尺寸。

至于為啥是x，我TM也不知道。

ch 文檔數字“0”的的寬度

同上，相對于數字“0”的寬度。

一張圖解釋：

vh View height / vw View Width - 可視范圍

相對于可視范圍的高度和寬度，可視范圍被均分為 100 單位的 vh/vw；可視范圍是指屏幕可見范圍，不是父元素的，百分比是相對于包含它的最近的父元素的高度和寬度。

假設設備可視范圍為高度 900px，寬度 750px，則， 1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px 。

vmin / vmax 可視范圍的寬度或高度中較小/較大的那個尺寸

假設瀏覽器的寬度設置為 1200px，高度設置為 800px， 則 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px 。

如果寬度設置為 600px，高度設置為 1080px, 則 1vmin = 6px, 1vmax = 10.8px 。

假設需要讓一個元素始終在屏幕上可見：

.box {

假設需要讓這個元素始終鋪滿整個視口的可見區域：

.box {

總結

em、rem 是實際生產中我們最常用到的單位，可以使用其配合媒體查詢改變 body 字體大小來實現響應式的設計，vh、vw、vmin、vmax也可以很方便地幫助我們控制響應尺寸，但實際的可控性可能不如前者，具體按照我們的業務需求去實踐吧！