掌握web開發基礎系列--長度單位

時間 2019-11-06

原文原文鏈接

思考一下

css中的長度單位有哪些？css

px, pt，em，rem，%， vw，vh，vmin，vmcx，ex，ch，cm，mm，in(inch)，pc ···html

咱們經常使用的其實就是 px， em， rem， %四種，下文中咱們將對經常使用的長度單位重點分析，對很是用的長度單位簡單介紹。首先咱們要知道css中的長度單位能夠分爲兩類： 相對長度單位 和 絕對長度單位 。

相對長度單位

css相對長度單位中的「相對」二字，代表了其長度會隨着它的參考值的變化而變化，不是固定的。因此，在使用相對長度單位以前必定要知道其 參考元素 是什麼。web

一、px (pixel)

思考：1px到底有多長？瀏覽器

關於px的相關信息《CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport》這篇文章中已經介紹的很詳細很詳細。下面對px進行歸納總結。佈局

瀏覽器內的一切長度都是以CSS像素爲單位的，CSS像素的單位是px，px是一個相對單位，相對的是設備像素(device pixel)，也就是物理像素，其相對性體如今在同一個設備上或在不一樣設備之間每1個px所表明的物理像素是能夠變化的。字體

那麼px究竟是什麼？ui

px實際是pixel（像素）的縮寫，根據維基百科的解釋，它是圖像顯示的基本單元，既不是一個肯定的物理量，也不是一個點或者小方塊，而是一個抽象概念。因此在談論像素時 必定要清楚它的上下文！必定要清楚它的上下文！必定要清楚它的上下文！spa

不一樣的設備，圖像基本採樣單元是不一樣的，顯示器上的物理像素等於顯示器的點距，而打印機的物理像素等於打印機的墨點。而衡量點距大小和打印機墨點大小的單位分別稱爲ppi和dpi：操作系統

ppi：每英寸多少像素數，放到顯示器上說的是每英寸多少物理像素及顯示器設備的點距。.net

dpi：每英寸多少點。

關於打印機的點距咱們不去關心，只要知道當用於描述顯示器設備時ppi與dpi是同一個概念。

CSS像素的真正含義

因爲不一樣的物理設備的物理像素的大小是不同的，因此css認爲瀏覽器應該對css中的像素進行調節，使得瀏覽器中 1css像素的大小在不一樣物理設備上看上去大小老是差很少，目的是爲了保證閱讀體驗一致。爲了達到這一點瀏覽器能夠直接按照設備的物理像素大小進行換算，而css規範中使用 參考像素 來進行換算。

1參考像素即爲從一臂之遙看解析度爲96DPI的設備輸出（即1英寸96點）時，1點（即1/96英寸）的視角。它並非1/96英寸長度，而是從一臂之遙的距離處看解析度爲96DPI的設備輸出一單位（即1/96英寸）時視線與水平線的夾角。一般認爲常人臂長爲28英寸，因此它的視角是: (1/96)in / (28in * 2 * PI / 360deg) = 0.0213度。

因爲css像素是一個視角單位，因此在真正實現時，爲了方便基本都是根據設備像素換算的。瀏覽器根據硬件設備可以直接獲取css像素。

這個換算過程有些燒腦，感興趣的同窗本身去研究css規範。下面兩個不一樣設備物理像素轉換爲css像素的對比。

設備名稱	屏幕（設備）分辨率	瀏覽器最大寬度（css像素）
14英寸MacBook PRO	2560dp x 1600dp	1440px
13.3英寸HP 440 G5	1366dp x 768dp	1366px

二、em

em用來適應用戶所使用的字體，1em至關於當前的字體尺寸（font-size屬性），2em相對於當前字體尺寸的2倍。

若是當前元素的父元素設置了font-size，則em參考元素爲其父元素。
若是當前元素的父元素沒有設置font-size，則逐級向上查找有設置font-size屬性的元素，直到<html>根元素。
若是當前元素的父元素向上全部父元素均沒有設置font-size，則em其參考大小爲瀏覽器默認大小 16px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--此處樣式可忽略-->
    <style> .box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px; border: 1px solid dodgerblue; float: left;} .box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto; margin-right: auto;border: 1px solid darkorchid; } </style>
</head>
<body>
    <div class="box-out">
        16px字體(瀏覽器默認大小)
        <div class="box-inner" style="font-size: 1em">
            1em字體
        </div>
    </div>
    <div class="box-out" style="font-size: 14px">
        14px字體
        <div class="box-inner" style="font-size: 1em">
            1em字體
        </div>
    </div>
    <div class="box-out" style="font-size: 14px">
        14px字體
        <div class="box-inner">
            <span style="font-size: 1.5em">1.5em字體，至關於(14*1.5 = 21)px</span>
        </div>
    </div>
    <div class="box-out" style="font-size: 24px">
        24px字體
        <div class="box-inner" style="font-size: 0.5em">
            <span style="font-size: 1.5em">1.5em字體，至關於(24*0.5*1.5 = 18)px</span>
        </div>
    </div>
</body>
</html>
複製代碼

妙招：段落首行縮進兩個漢字

.indent {
    text-indent: 2em;
}
複製代碼

三、rem

rem 即 root em，其參考元素爲文檔的根元素<html>中font-size屬性。

若是文檔根元素<html>沒有設置font-size屬性，那麼當前元素rem相對於瀏覽器默認字體大小16px
若是文檔根元素<html style="font-size: 20px">設置了font-size屬性，那麼當前元素rem相對於文檔的根元素<html>

<!DOCTYPE html>
<html lang="en" style="font-size: 20px">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--此處樣式可忽略-->
    <style> .box-out { text-align: center;width: 240px;height: 120px;margin-top: 10px;margin-left: 10px; border: 1px solid dodgerblue; float: left;} .box-inner {text-align: center;width: 180px;height: 60px;margin-top: 10px;margin-left: auto; margin-right: auto;border: 1px solid darkorchid; } </style>
</head>
<body>
    <div class="box-out">
        20px字體(文檔根元素字體大小)
        <!--此時em也相對於<html>上面的fontSize-->
        <div class="box-inner" style="font-size: 1em">
            1em字體，至關於20px
        </div>
    </div>
    <!--下面元素設置fontSize對子元素rem不起做用-->
    <div class="box-out" style="font-size: 12px">
        12px字體
        <div class="box-inner" style="font-size: 1rem">
            1rem字體，至關於20px
        </div>
    </div>
</body>
</html>
複製代碼