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

創(chuàng)新互聯(lián)公司是一家專業(yè)提供鹽山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、HTML5、小程序制作等業(yè)務(wù)。10年已為鹽山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

                                                           網(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í)。

分享題目：css相對(duì)字體中px，em，rem該選擇哪個(gè)
URL鏈接：http://aaarwkj.com/article34/ipoose.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、全網(wǎng)營(yíng)銷推廣、服務(wù)器托管、網(wǎng)站導(dǎo)航、微信小程序、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)