css相對(duì)字體中px，em，rem該選擇哪個(gè)？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)科技有限公司專業(yè)互聯(lián)網(wǎng)基礎(chǔ)服務(wù)商，為您提供成都移動(dòng)服務(wù)器托管，高防主機(jī)，成都IDC機(jī)房托管，成都主機(jī)托管等互聯(lián)網(wǎng)服務(wù)。

                              網(wǎng)頁(yè)設(shè)計(jì)中大的混淆之一是由font-size屬性引起的。最常用的字體大小是像素（px），em和rem。

首先，我們將重點(diǎn)關(guān)注字體大小屬性。

在CSS中，可以使用多個(gè)單元（例如像素，em和rem），這通常會(huì)導(dǎo)致設(shè)計(jì)人員額外頭痛。在本文中，我們將詳細(xì)介紹這些單位的用法和任何誤解。

PX單位

最常見(jiàn)和最受歡迎的單位是像素（px）。大多數(shù)人開(kāi)始使用像素（px）單元，因?yàn)樗鼓梢酝耆刂莆谋敬笮?。如果未指定字體大小，則普通文本的默認(rèn)大?。ㄈ缍温洌?6px。

使用像素（px）單元的主要問(wèn)題是，與em或rem單元不同，它們不可擴(kuò)展，并且在不同屏幕尺寸上改變字體大小可能具有挑戰(zhàn)性。

此外，像素（px）單元與任何東西都無(wú)關(guān)。因此，如果要根據(jù)屏幕大小更改整個(gè)頁(yè)面的大小，則必須單獨(dú)更改每個(gè)元素的字體大小。

EM單位

em單位是一個(gè)可擴(kuò)展的字號(hào)單位。它與父容器的字體大小有關(guān)。一個(gè)em（1em）等于當(dāng)前的字體大小。因此，例如，如果父元素的字體大小為16px而不是1em等于16px，則2em等于32px，依此類推......

如果使用em單位而不是px，使設(shè)計(jì)響應(yīng)變得更容易。

但是，有一件事需要照顧。使用em單元時(shí)，應(yīng)該小心嵌套。

例如，假設(shè)您創(chuàng)建了一個(gè)部分并將其字體大小設(shè)置為2em，現(xiàn)在，您要在字體大小為1em的部分中添加一個(gè)段落。段落的字體大小與該部分的字體大小有關(guān)。如果嵌套繼續(xù)，或者如果它在項(xiàng)目的多個(gè)部分上使用，你可能會(huì)就會(huì)忽略它并完全丟失。

現(xiàn)在我們已經(jīng)了解了em單位，現(xiàn)在是我們引入rem單元的最佳時(shí)機(jī)。

REM單位

rem單位是另一種可縮放的字體大小，但與em單位不同，它與根元素（HTML）而不是父元素相關(guān)。這就是rem單位得名的地方（root em = rem）。

這意味著，如果在元素上使用rem單位，只需調(diào)整根字體大小即可快速更改整個(gè)項(xiàng)目的字體大小。這種方式快速，簡(jiǎn)單，并且避免了使用em單元時(shí)可能遇到的任何嵌套復(fù)雜問(wèn)題。

那么，你應(yīng)該使用哪個(gè)單位？

回答這個(gè)問(wèn)題的最好方法是使用一個(gè)例子。

首先，我們將使用px單位。

html { font-size: 100% } //usually this equals to 16px
div { Font-size: 16px; }
div>p { font-size: 14px; }

效果如下：

在這里，您可以注意到每個(gè)元素的字體大小都是以像素（px）為單位設(shè)置的，它們之間沒(méi)有任何關(guān)系。

接下來(lái)，我們將em單位用于相同的代碼段。

html { font-size: 100% }
div { Font-size: 0.875em; } //this equals to 14px
div>p { font-size: 2em; } // this equals to 28px

效果如下：

在此示例中，px和em單位之間的差異很明顯。em單位的相對(duì)性很明顯。只需更改容器div的字體大小，我們就可以看到段落字體大小相應(yīng)更新。

最后，使用rem單位。

html { font-size: 100% }
div { Font-size: 1rem; } //this equals to 16px
div>p { font-size: 1.5rem; } // this equals to 24px

效果如下：

使用rem單位時(shí)，很明顯所有字體大小都與根字體大小有關(guān)。div和段落字體大小都與根相關(guān)，盡管div是段落的父級(jí)。

總結(jié)

沒(méi)有正確或錯(cuò)誤的單位。這一切都取決于您的技能水平，項(xiàng)目類型和規(guī)模以及個(gè)人喜好。

如果您想完全控制字體大小，則像素單位適合您。如果您在操作網(wǎng)頁(yè)時(shí)希望獲得更多的靈活性，那么em或rem單元是最佳選擇。無(wú)論哪種方式，當(dāng)完全理解單位時(shí)，將獲得最佳結(jié)果。

關(guān)于css相對(duì)字體中px，em，rem該選擇哪個(gè)問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：css相對(duì)字體中px，em，rem該選擇哪個(gè)-創(chuàng)新互聯(lián)
路徑分享：http://weahome.cn/article/dpgoed.html