CSS長度單位詳解

時間 2019-12-06

標籤 css 長度單位詳解欄目 CSS 简体版

原文原文鏈接

序言

長度單位能夠整體的分爲絕對長度單位和相對長度單位。CSS中最爲你們熟知的無疑是px和em，但與此同時還存在pt, rem, vw, vh等其餘計量單位，使用好它們能夠大大增加咱們的開發效率。本篇文章試圖整理在前端開發中用到的CSS單位和其應用場景。css

px——像素

px是pixel縮寫，是基於像素的單位。在瀏覽網頁過程當中，屏幕上的文字、圖片等會隨屏幕的分辨率變化而變化，一個100px寬度大小的圖片，在800×600分辨率下，要佔屏幕寬度的1/8，但在1024×768下，則只佔約1/10。因此若是在定義字體大小時，使用px做爲單位，那一旦用戶改變顯示器分辨率從800到1024，用戶實際看到的文字就要變「小」（天然長度單位），甚至會看不清，影響瀏覽。html

pt——磅

pt就是point，是印刷行業經常使用單位，等於1/72英寸。pt全稱爲point，但中文不叫「點」，確切的說法是一個專用的印刷單位「磅」，大小爲1/72英寸，是一個絕對長度單位。前端

em——相對父元素

em單位是指其正在使用的字體大小。在一個頁面上給定一個父元素的字體大小,這樣就能夠經過調整一個元素來成比例的改變全部元素大小.它能夠自由縮放,好比用來製做可伸縮的樣式表。css3

此處有一個關於【繼承】的點須要注意：使用em設定寬高行高等屬性的元素，其子元素繼承的並非em，而是其計算以後的值，這一點與使用百分號相同。而不添加單位，其子元素則繼承的是百分比，子元素會根據其自身的字號計算得出對應屬性值。具體看下面例子：web

<div style="line-height:1.5em;font-size:16px;background-color:yellow;">父元素內容 <div style="font-size:40px;background-color:red"> Web前端開發 </div>
</div>

當使用em時，最外層父元素的行高是1.5*16px=24px，同時其子元素繼承了該line-height，效果圖以下：瀏覽器

能夠看出因爲40px>24px，因此字體「溢出」了。而當不添加單位時：app

<div style="line-height:1.5;font-size:16px;background-color:yellow;">父元素內容 <div style="font-size:40px;background-color:red"> Web前端開發 </div>
</div>

效果以下：佈局

其行高會跟隨自身字號進行計算，繼承的只是「比例"。字體

rem——相對根元素

rem是指根元素（root element）的字體大小，它會隨着父元素的字體大小變化而變化，減小了父子元素之間字體大小計算的複雜程度。因爲根源素的默認字體大小是16px，爲了方便計算，咱們能夠進行以下設置：

html{ font-size: 62.5%;      /*10÷16*/
} h1{ line-height: 24px; line-height: 2.4rem;
}

IE9+ 和現代瀏覽器都已經支持了。flex

rem很是適合作web app的開發，其在web app中的具體應用請參見：

web app變革之rem

萌の宇 – mobile H5佈局大全-rem flexbox詳解

Flexbox——快速佈局神器_flexbox, CSS3, layout 教程_w3cplus

vw和vh——相對瀏覽器窗口

vh等於viewport高度的1/100。例如，若是瀏覽器的高是900px,1vh求得的值爲9px。同理，若是顯示窗口寬度爲750px,1vw求得的值爲7.5px。當咱們想設置跟隨視口變化的字體，或是填滿整個屏幕的div時，這個單位是很是有用的。

IE10＋和現代瀏覽器都支持這兩個單位。

vmin 和 vmax

vh和vm老是與視口的高度和寬度有關，與之不一樣的，vmin和vmax是與此次寬度和高度的最大值或最小值有關，取決於哪一個更大和更小。例如，若是瀏覽器設置爲1100px寬、700px高，1vmin會是7px，1vmax爲11px。然而，若是寬度設置爲800px，高度設置爲1080px，1vmin將會等於8px而1vmax將會是10.8px。