運算

  • calc: 四則運算

實例：css

h1 { width: calc(100% - 10px + 2rem) }

單位比例

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96pxhtml

詳細

絕對單位

px - Pixel 像素瀏覽器

像素 px 相對於設備顯示器屏幕分辨率而言。post

div { font-size: 12px } p { text-indent: 24px }

pt Points 磅字體

1 pt = 1/72 英寸ui

div { font-size: 10pt } p { height: 100pt }

pc Picas 派卡spa

十二點活字（印刷中使用的），至關於我國新四號鉛字的尺寸。設計

div { font-size: 10pc } p { height: 10pc }

in Inches 英寸3d

div { font-size: 10in } p { height: 10in }

mm Millimeter 毫米code

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 ）內文本的字體尺寸而言，若未指定字體大小則繼承爲瀏覽器默認字體大小。

<body> <div class="element"></div> </body> <style> body { font-size: 14px; } .element { font-size: 16px; width: 2rem; /* 2rem === 28px */ } </style>

ex 文檔字符「x」的高度

相對於字符「x」的高度，一般爲字體高度的一半，若未指定字體尺寸，則相對於瀏覽器的默認字體尺寸。

至於爲啥是x，我TM也不知道。

<body> <div class="x"></div> </body> <style> .x { height: 1ex; overflow: hidden; background: #aaa; } </style>

ch 文檔數字「0」的的寬度

同上，相對於數字「0」的寬度。

<body> <h1>定義一個寬度正好能裝下10個0的容器：</h1> <div class="0">0000000000</div> </body> <style> .0 { width: 10ch; overflow: hidden; background: #ccc; } </style>

一張圖解釋：

 

 

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

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

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

<body> <h1>article title</h1> <div class="element"></div> <div class="full-height"></div> </body> <style> .element { width: 50vw; height: 80vh; /* 若是屏幕高度爲1000px，則該元素高度爲800px，vw 同理 */ } .full-height { height: 100vh; /* 輕易實現了與屏幕同等高度的元素 */ } h1 { width: 100vw; /* 設置一個和屏幕同寬的標題，標題的字體大小就會自動根據瀏覽器的寬度進行縮放，以達到字體和viewport大小同步的效果。 */ } </style>

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

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

若是寬度設置爲 600px，高度設置爲 1080px, 則1vmin = 6px, 1vmax = 10.8px。

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

.box { height: 100vmin; width: 100vmin; }

 

 

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

.box { height: 100vmax; width: 100vmax; }

 

 

總結

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

通常我作PC端 也仍是用 px 爲單位 響應式 以及移動端都是用rem  居多

在此還想強調一點 必定要跟本身的設計溝通好！設計是基於什麼作的 你須要注意什麼，團隊須要多溝通。

原文地址：https://surmon.me/article/58

完