px,em,rem,vh,vw,vmin,vmax的區(qū)別

發(fā)布時間：2020-10-22 06:06:29 來源：網(wǎng)絡(luò) 閱讀：3162 作者：frwupeng517 欄目：移動開發(fā)

css手冊中關(guān)于font-size是這么介紹的：

font-size 值可以是絕對或相對值。

絕對值：

將文本設(shè)置為指定的大小
不允許用戶在所有瀏覽器中改變文本大小（不利于可用性）
絕對大小在確定了輸出的物理尺寸時很有用

相對大?。?/span>

相對于周圍的元素來設(shè)置大小
允許用戶在瀏覽器改變文本大小

注意：如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。

1、px：為像素單位。它是顯示屏上顯示的每一個小點，為顯示的最小單位。它是一個絕對尺寸單位；

2、em：相對值，非固定大小單位

1em 等于當(dāng)前的字體尺寸。如果一個元素的 font-size 為 16 像素，那么對于該元素，1em 就等于 16 像素。在設(shè)置字體大小時，em 的值會相對于父元素的字體大小改變。

瀏覽器中默認(rèn)的文本大小是 16 像素。因此 1em 的默認(rèn)尺寸是 16 像素。

可以使用下面這個公式將像素轉(zhuǎn)換為 em：pixels/16=em

（注：16 等于父元素的默認(rèn)字體大小，假設(shè)父元素的 font-size 為 20px，那么公式需改為：pixels/20=em）

看一小段例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>px,em,rem,vh,vw,vmin,vmax的區(qū)別</title>
    <style>
        div{font-size:1.5em;}
    </style>
</head>
<body>
<div class="id1">div1
    <div class="id2">div2
        <div class="id3">div3</div>
    </div>
</div>

</body>
</html>

頁面效果截圖：

px,em,rem,vh,vw,vmin,vmax的區(qū)別

字體大小同樣都是1.5em，但是效果卻截然不同，按照W3C提供的公式，我們可以計算下：

body繼承瀏覽器默認(rèn)字體大?。?6px

class為id1的div字體大小繼承自父元素body：16px*1.5em = 24px

class為id2的div字體大小繼承自父元素id1：24px*1.5em = 36px

class為id3的div字體大小繼承自父元素id2：36px*1.5em = 54px

這種轉(zhuǎn)換說白了其實就是兒子的字體大小除以父親的字體大小就得到了對應(yīng)的em值，這里有一個網(wǎng)站可以專門自動轉(zhuǎn)換px，em，%，pt，要是真的看到數(shù)字就頭疼的話，可以點擊鏈接進(jìn)入網(wǎng)站自動轉(zhuǎn)換：http://pxtoem.com/

px,em,rem,vh,vw,vmin,vmax的區(qū)別

在 Firefox, Chrome, and Safari 中，可以重新調(diào)整用px作為單位的字體大小，但是在 Internet Explorer 中不行。

雖然可以通過瀏覽器的縮放工具調(diào)整文本大小，但是這實際上是對整個頁面的調(diào)整，而不僅限于文本。

W3C推薦使用em尺寸單位

3、rem：W3C官網(wǎng)是這樣描述的“fontsize of the root element”，root element就是指的根元素html

前面說到的em是相對于其父元素來設(shè)置字體大小的，這樣就會存在一個問題，進(jìn)行任何元素設(shè)置，都必須知道父元素的字體大小，在多次使用中往往會給我們帶來無法預(yù)知的錯誤風(fēng)險。而rem是相對于根元素html

我們把上面的例子稍加修改：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>px,em,rem,vh,vw,vmin,vmax的區(qū)別</title>
    <style>
        div{font-size:1.5rem;}
        .id3{font-size:1.5em;}
    </style>
</head>
<body>
<div class="id1">div1
    <div class="id2">div2
        <div class="id3">div3</div>
    </div>
</div>

</body>
</html>

再對比下頁面效果

px,em,rem,vh,vw,vmin,vmax的區(qū)別

div1和div2的字體大小：繼承自瀏覽器默認(rèn)字體大小16px * 1.5rem = 24px

div3的字體大?。豪^承自父元素div2的字體大小24px * 1.5em = 36px

瀏覽器的兼容性問題：

rem是CSS3新引進(jìn)來的一個度量單位，支持Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+，IE8及以下版本均不支持

4、% 百分比，相對長度單位，相對于父元素的百分比值

需要注意的是：em是相對于應(yīng)用于當(dāng)前當(dāng)前元素的字體尺寸；而百分比則是相對于父元素的尺寸。如下面示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{margin:10px; background:#f0f;}
        .parent{width:200px; font-size:18px;}
        .em-demo{width:5em; background:#eae;}
        .percentage-demo{width:80%; background:#2f6;}
    </style>
</head>
<body>
<div class="parent">
    <div class="em-demo">
        設(shè)置長度為5em demo
    </div>

    <div class="percentage-demo">
        設(shè)置長度為80% demo
    </div>
</div>
<div id="id"></div>
</body>
</html>

查看下頁面效果截圖

px,em,rem,vh,vw,vmin,vmax的區(qū)別

可以看到，以em為單位的div寬度為90px：18px * 5em，以%為單位的div寬度為160px：200px * 0.8

對于px、em和百分比都能設(shè)置元素的尺寸和字體大小，但是它們各自有自己所不同的應(yīng)用場景。不合理的運用，則會導(dǎo)致頁面的混亂、難易維護(hù)和擴(kuò)展。對于它們的使用，有如下幾點被大家所認(rèn)同的最佳實踐：

4.1、盡量使用相對尺寸單位

使用相對尺寸單位計量，則在調(diào)整頁面的布局的時候，不需要遍歷所有的內(nèi)部DOM結(jié)構(gòu)，重新設(shè)置內(nèi)部子元素的尺寸大小，同時它也能更好的適應(yīng)與多中分辨率和屏幕終端。采用相對定位，并不意味著頁面整體的自適應(yīng)。

當(dāng)然，對于希望整體網(wǎng)站的“響應(yīng)式設(shè)計”，適應(yīng)當(dāng)今層出不窮的的各類訪問終端，相對尺寸布局將發(fā)揮更大的價值。我們僅需要利用CSS3的@media查詢來設(shè)置外圍的整體寬度，以及少量在設(shè)備上不一致的用戶體驗。關(guān)于“響應(yīng)式布局”，可以更多的參考bootstrap這類新興的CSS框架。

對于相對尺寸單位的設(shè)置：em和%因為它們相對的參考物不同，所以它們也有不同的使用場景。如果希望隨著當(dāng)前元素的字體尺寸而改變尺寸，則使用em最佳，如：行高、字體大小。相反，如果是隨著父容器或者是整體頁面布局而改變尺寸，則使用%更好，如元素的高度和寬度設(shè)置。

4.2、只在可預(yù)知的元素上使用絕對尺寸

并不是所有的元素設(shè)置相對尺寸就是最佳的。對于如圖表icon、如video這類多媒體元素、網(wǎng)頁整體的寬度這類可預(yù)知尺寸，設(shè)置為絕對路徑可能反而是最佳的選擇。但他們需要試具體場景而定，從而獲得最佳體驗。不管我們?nèi)绱嗽O(shè)置相對尺寸，但在外層也總會有一些絕對尺寸度量，才可能存在百分比這類相對尺寸設(shè)置。

4.3、字體尺寸盡量使用em、rem

和盡量使用相對尺寸單位一樣，為了字體大小的可維護(hù)性和伸縮性，W3C更推薦使用em作為字體尺寸單位。需要注意的是，如果存在3層以及3層以上的字體相對尺寸的設(shè)置，則對于實際字體大小的計算，就會變得相對麻煩。這個時候，在滿足瀏覽器兼容性的情況下，可以考慮使用CSS3的新特性rem：根據(jù)固定根元素的字體大小來設(shè)置相對尺寸大小，這也是近幾年移動APP所興起的使用方式。

rem的兼容性，我們可以用Can I Use網(wǎng)站獲取。http://caniuse.com/

px,em,rem,vh,vw,vmin,vmax的區(qū)別

4.4、@media查詢做平臺適配，但禁止隨處濫用

如上所說CSS3的@media查詢，能幫助我們做到多平臺終端的自適應(yīng)布局，得到一個更好的用戶體驗。但這絕不意味著我們可以隨處濫用它，在CSS代碼中存在太多的平臺差異的代碼，這也會增加代碼可讀性、維護(hù)性的難度。更好的方式則是僅在必須使用它的場景下，合理的使用它，如頁面外圍的整體寬度，不同顯示的菜單欄等。更多的體驗適應(yīng)性，可以移動到使用“流式布局”來實現(xiàn)。

關(guān)于響應(yīng)式設(shè)計，這是對開發(fā)周期、成本和平臺體驗的一個權(quán)衡的結(jié)果。如果不考慮開發(fā)、維護(hù)的成本，則為不同平臺終端提供不同的頁面設(shè)計，這樣得到的用戶體驗會更友好。但在實際開發(fā)中，開發(fā)和維護(hù)成本、產(chǎn)品生命周期也是一個重要的權(quán)衡標(biāo)準(zhǔn)，而響應(yīng)式設(shè)計則是它們之間的權(quán)衡結(jié)果。

5、vh和vw，vmin和vmax

vh和vw相對于視口的高度和寬度，而不是父元素的（CSS百分比是相對于包含它的最近的父元素的高度和寬度）

1vh 等于1/100的視口高度，1vw 等于1/100的視口寬度
比如：瀏覽器高度900px，寬度為750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。

很容易實現(xiàn)與同屏幕等高的框：

CSS代碼：

.slide {height: 100vh;}

設(shè)置一個和屏幕同寬的標(biāo)題，h2{font-size:100vw}，那標(biāo)題的字體大小就會自動根據(jù)瀏覽器的寬度進(jìn)行縮放，以達(dá)到字體和viewport大小同步的效果。

vmin and vmax：關(guān)于視口高度和寬度兩者的最小值或者最大值。

比如，瀏覽器的寬度設(shè)置為1200px，高度設(shè)置為800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果寬度設(shè)置為600px,高度設(shè)置為1080px, 1vmin就等于6px, 1vmax則等于10.8px。

有一個元素，你需要讓它始終在屏幕上可見：

HTML代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title></title>
    <style>
        *{margin:0; padding:0;}
        .box {
            height: 100vmin;
            width: 100vmin;
            background:#f00;/*為了讓用戶看到*/
        }
    </style>
</head>
<body>

<div class="box"></div>
</body>
</html>

頁面截圖，紅色區(qū)域會隨著瀏覽器窗口的大小改變而改變

px,em,rem,vh,vw,vmin,vmax的區(qū)別

如果要讓這個元素始終鋪滿整個視口的可視區(qū)域，只需要把上面的vmin改成vmax即可

CSS代碼：

*{margin:0; padding:0;}
.box {
    height: 100vmax;
    width: 100vmax;
    background:#f00;/*為了讓用戶看到*/
}

頁面截圖，紅色區(qū)域在任意手機(jī)機(jī)型模擬器下都會鋪滿整個屏幕

px,em,rem,vh,vw,vmin,vmax的區(qū)別

vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，iOS safari 8+支持，Androidbrowser4.4+支持，chrome for android39支持

其它的單位還有：
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大約1/72寸

pc:pica，大約6pt，1/6寸

6、ex：取當(dāng)前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加么有前綴)

7、ch:以節(jié)點所使用字體中的“0”字符為基準(zhǔn)，找不到時為0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

px,em,rem,vh,vw,vmin,vmax的區(qū)別

在學(xué)習(xí)過程中，參考了以下幾篇博文，感謝博主的分享

http://j.news.163.com/docs/99/2014111814/ABBB78BG00964KGG.html

http://www.cnblogs.com/whitewolf/p/css-em-px-percentage.html

http://www.zhangxinxu.com/wordpress/2011/03/css-css3-unit-units/

向AI問一下細(xì)節(jié)

px,em,rem,vh,vw,vmin,vmax的區(qū)別

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽