完结小说,完美世界辰东

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

為什么你永遠(yuǎn)不應(yīng)該在CSS中使用px來(lái)設(shè)置字體大小

在Josh Collinsworth的博客文章“永遠(yuǎn)不要用px作為字體大小”中，作者討論了為什么不應(yīng)該使用像素（px）作為網(wǎng)頁(yè)字體大小的單位[1]。作者指出，相對(duì)于容器、瀏覽器或用戶的字體大小，px值是靜態(tài)的。無(wú)論用戶的字體偏好設(shè)置如何，當(dāng)您以靜態(tài)像素設(shè)置值時(shí)，它將覆蓋用戶的選擇，以您指定的確切值替代。這意味著，如果您的樣式表使用像素單位，可能導(dǎo)致訪問(wèn)您網(wǎng)站的用戶難以閱讀。

因此，作者建議使用相對(duì)單位，如em、rem或百分比，而不是像素。這些單位是基于用戶的字體大小偏好設(shè)置進(jìn)行縮放的，從而提供了更好的可訪問(wèn)性和可讀性。尤其是在設(shè)計(jì)響應(yīng)式網(wǎng)站時(shí)，相對(duì)單位能夠提高跨設(shè)備的兼容性。通過(guò)使用相對(duì)單位，設(shè)計(jì)師可以確保網(wǎng)站在不同設(shè)備和瀏覽器中以合適的字體大小顯示[1]。

下面是正文：

在 Web 開(kāi)發(fā)領(lǐng)域中，有很多誤解流傳，即使它們被反駁了很多次也仍然存在。"外部鏈接應(yīng)該總是在新標(biāo)簽頁(yè)中打開(kāi)" 就是一個(gè)很好的例子。CSS Tricks 在將近十年前就對(duì)此進(jìn)行了詳細(xì)的解釋（簡(jiǎn)而言之：大多數(shù)情況下是錯(cuò)誤的），但它似乎仍然在某些角落中存在。

案例證明：在CSS中， px? ， em? 或 rem 單位之間沒(méi)有功能上的區(qū)別的想法是一個(gè)我一遍又一遍聽(tīng)到的誤解，因此我想在這里發(fā)帖來(lái)解決這個(gè)問(wèn)題。

我們要非常清楚：在CSS中使用的單位絕對(duì)很重要。并且在設(shè)置時(shí) font-size? 應(yīng)盡可能避免使用 px 。

我們?cè)谡務(wù)撌裁磫挝?，它們是做什么的?/h2>
在我們討論為什么應(yīng)該避免使用 px? 作為 font-size 之前，讓我們確保我們都清楚我們正在談?wù)撃男﹩挝唬约八鼈兊囊话阈袨椤?/p>

px

px? 是像素的縮寫(xiě)……雖然現(xiàn)在大多數(shù)情況下它不再是一個(gè)真正的像素。在顯示器通常是一個(gè)相對(duì)可預(yù)測(cè)的低分辨率像素比例，比如1024×768?的時(shí)代， 1px 通常等于屏幕上的一個(gè)實(shí)際像素。

屏幕使用稱為像素的彩色光點(diǎn)陣來(lái)顯示圖像。一個(gè)像素是顯示器上的一個(gè)彩色光點(diǎn)；硬件能夠呈現(xiàn)的最小可能的“點(diǎn)”。這就是我在本節(jié)中所說(shuō)的“字面上的”、“實(shí)際的”或“設(shè)備”像素；物理世界中的一個(gè)像素。

然而，當(dāng)高分辨率（有時(shí)稱為“視網(wǎng)膜”）屏幕出現(xiàn)時(shí)，設(shè)備開(kāi)始將更多的像素壓縮到更小的空間中，這些物理設(shè)備像素變得非常微小。在高分辨率屏幕上瀏覽網(wǎng)頁(yè)，如果CSS中的 1px 仍然對(duì)應(yīng)于一個(gè)字面設(shè)備像素，那么甚至閱讀任何內(nèi)容都將非常困難，因?yàn)橄袼乇旧碚谘杆倏s小。畢竟，現(xiàn)代智能手機(jī)的分辨率甚至比高清電視還要高。

所以現(xiàn)在， 1px? 通常對(duì)應(yīng)于放大的“縮放”像素的大小，而不是實(shí)際硬件上的字面像素。在我們的 CSS 中， 1px 的東西可能會(huì)占用多個(gè)物理硬件像素，而我們沒(méi)有任何純 CSS 的方法來(lái)指定一個(gè)字面設(shè)備像素。但這沒(méi)關(guān)系，因?yàn)樗鼈兺ǔＬ×?，我們不想去處理它們?/p>

一個(gè)例子：iPhone 14 Pro 上的像素非常微小，16px 在字面上的設(shè)備像素大小大約相當(dāng)于2pt字號(hào)的印刷字體大小。好在瀏覽器為我們縮放了它們！

大多數(shù)情況下，這些并不在本討論的語(yǔ)境中真正重要，但我認(rèn)為了解這些還是很好的。重要的部分是：1px 等于瀏覽器視為單個(gè)像素的任何內(nèi)容（即使在硬件屏幕上它不是真正的像素）。

em 和 rem

這就帶我們來(lái)到了 em? 和 rem? ，它們彼此相似。繼續(xù)講述不嚴(yán)格相關(guān)但仍然有趣的小知識(shí)："em" 是一個(gè)排版術(shù)語(yǔ)，實(shí)際上比計(jì)算機(jī)早了幾十年。在排版上，一個(gè) em 等于當(dāng)前字體大小。

如果你將字體大小設(shè)置為 32pt?（“pt”是另一個(gè)仍然有時(shí)使用的舊排版術(shù)語(yǔ)），那么 1em? 就是32pt?。如果當(dāng)前字體大小為 20px? ，那么 1em = 20px。

在網(wǎng)頁(yè)上，默認(rèn)字體大小為 16px? 。一些用戶從不更改默認(rèn)設(shè)置，但許多人會(huì)更改。但默認(rèn)情況下， 1em? 和 1rem 都將等于 16px 。

“Em” 最初是指 “M” 字符的寬度，這也是名稱的由來(lái)。但現(xiàn)在它指的是當(dāng)前字體大小，而不是特定字形的尺寸。

EM 和 REM 之間的區(qū)別

為了區(qū)分這兩者：1rem? 始終等于瀏覽器的字體大小，或者更準(zhǔn)確地說(shuō)是 html 元素的字體大小。rem? 代表“根em”，而網(wǎng)頁(yè)的根是?標(biāo)簽。因此， 1rem? = document? 字體大小。（默認(rèn)情況下，這是 16px ，但可以被用戶覆蓋。）

另一方面，em是當(dāng)前元素的字體大小?？聪旅娴腃SS：

.container {
  font-size: 200%;
}

p {
  font-size: 1em;
}

考慮到上述 CSS， .container? 元素內(nèi)的段落將會(huì)變成原來(lái)的兩倍大小。這是因?yàn)?nbsp;1em? 表示“當(dāng)前字體大小”，在 .container? 內(nèi)，它是200%。1em × 200% = 2em? （默認(rèn)為 32px ）。

然而， .container ?元素外的段落仍將是 1em? 的正常字體大?。J(rèn)為 16px ）。

如果我們?cè)谏厦娴腃SS中將 em? 更改為 rem ，那么所有段落標(biāo)簽的字體大小將始終是瀏覽器的默認(rèn)大小，無(wú)論它們?cè)谀睦铩?/p>

font-size: 1em 等同于 font-size: 100% 。em 和 % 單位在其他情況下并不總是等價(jià)的；例如， width: 1em? 和 width: 100%? 很可能會(huì)非常不同，因?yàn)榇藭r(shí)百分比是基于父容器的寬度而不是其字體大小。但是，就 font-size 屬性而言， %? 和 em 是相同的。

總結(jié)一下：

1em 是當(dāng)前元素的字體大小。
1rem （根em）是文檔的字體大?。礊g覽器的字體大?。?/li>

好的，那就是單位的含義和來(lái)源。現(xiàn)在讓我們回答為什么使用哪個(gè)單位很重要。

為什么這一切都很重要

再次強(qiáng)調(diào)的誤解是：既然 1em? 和 16px? 相等，那么選擇哪個(gè)單位并不重要。這似乎是合理的；如果 16px = 1rem ，那么選擇哪種方式輸入似乎并不重要。

記住， em? 和 rem 是相對(duì)的；默認(rèn)情況下，它們都（最終）基于瀏覽器的字體大小。

2rem? 是瀏覽器字體大小的兩倍；0.5rem? 是其一半，依此類推。因此，如果用戶更改其選擇字體大小，如果使用 em? 和 rem? ，則網(wǎng)站上的所有文本都會(huì)相應(yīng)更改，就像應(yīng)該的那樣。2rem ?仍然是該字體大小的兩倍；0.5rem 仍然是其一半。

相比之下， px? 值是靜態(tài)的。無(wú)論容器、瀏覽器或用戶的字體大小如何， 20px? 只是 20px 。當(dāng)設(shè)置靜態(tài)像素值時(shí)，無(wú)論用戶的字體偏好大小如何，它都會(huì)覆蓋該選擇并使用指定的確切值。

批判性地說(shuō)，這意味著如果你的樣式表使用 px? 在任何地方設(shè)置 font-size ，那么基于該值的任何文本都將無(wú)法由用戶更改。

那是非常糟糕的事情。它是不可訪問(wèn)的，甚至可能會(huì)阻止某人完全使用該網(wǎng)站。

因此，雖然可能存在一些有效的用例來(lái)解釋這種行為，但它絕對(duì)不是你想要的默認(rèn)行為。

這也是避免使用視口單位（如 vw 或 vh ）設(shè)置字體大小的非常好的理由。它們也是靜態(tài)的，用戶無(wú)法覆蓋。最多，像 calc(1rem + 1vw)? 這樣的值可能是可以接受的，因?yàn)樗匀话?nbsp;rem? 作為基礎(chǔ)。即便如此，我仍建議使用 clamp() 或媒體查詢來(lái)設(shè)置最小和最大值，因?yàn)槠聊怀叽缤h(yuǎn)遠(yuǎn)超出我們所期望或測(cè)試的范圍。

超出字體大小的差異

好的，現(xiàn)在讓我們談?wù)劗?dāng)我們不特別處理 font-size? 屬性時(shí)， px? 和 em / rem 如何變化。

開(kāi)發(fā)人員通常通過(guò)縮放頁(yè)面來(lái)進(jìn)行測(cè)試，我認(rèn)為這就是本文中心誤解的來(lái)源。當(dāng)你縮放時(shí)，所有內(nèi)容都會(huì)被縮放（放大或縮?。?，在這種情況下，選擇 px? 或 em? / rem 作為你的CSS單位通常并不重要。就縮放而言，兩者的行為方式相同。而且，大多數(shù)視力良好的開(kāi)發(fā)人員可能不會(huì)意識(shí)到其中還有更多內(nèi)容。然而，棘手的問(wèn)題是：

即使超出 font-size? ， px? 的行為也與 em? 和 rem 不同。

px? 單位仍然與屏幕上像素的縮放值相關(guān)聯(lián)。em? 和 rem 與文檔的字體大小相關(guān)聯(lián)，而不是頁(yè)面的縮放或比例。

為了演示，請(qǐng)看這個(gè) CodePen：

https://codepen.io/collinsworth/pen/WNyvvqY

HTML CSSResult Skip Results Iframe
EDIT ON

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam eum aliquam eveniet.

Sapiente delectus in ab excepturi, commodi placeat quaerat saepe voluptas sunt numquam.

Rerum veniam, quidem voluptatibus deleniti nihil consequatur blanditiis explicabo eum quos. Nam.

Natus necessitatibus delectus neque tenetur sint illum obcaecati similique sequi doloribus eligendi?

Eos quidem iure debitis dolorum repellendus ab incidunt ipsam suscipit, autem consequuntur?

p {
  border-bottom: 2px solid black;
  margin-top: 0;
  margin-bottom: 20px;
}

我們有幾個(gè)段落，每個(gè)段落底部有 2px? 邊框，并且它們之間有 20px? 邊距。請(qǐng)注意，我們對(duì)兩者都使用 px 單位。

如果你放大或縮小，元素的大小和距離保持相對(duì)不變。也就是說(shuō)：你放大得越多，那條線就越粗，段落之間的間距就越大。

為了方便起見(jiàn)，這里有一張截圖，顯示了同一支筆的400％縮放。文本、線條和間距都變大了4倍；它們相對(duì)于彼此的大小保持不變：

當(dāng)涉及到縮放時(shí)， px? 、 em? 或 rem 之間沒(méi)有真正的區(qū)別。但縮放并不是用戶使網(wǎng)站更易用的唯一方法。

如前所述，用戶還可以指定默認(rèn)和/或最小字體大小。當(dāng)他們這樣做時(shí)，功能開(kāi)始分歧。

在下面的截圖中，我已將Firefox的默認(rèn)字體大小設(shè)置為 64px ?？匆幌拢?/p>

將屏幕截圖中的文本與其上方的文本進(jìn)行比較。請(qǐng)注意，這一次，行并沒(méi)有變粗，段落之間的邊距也沒(méi)有成比例增加。只有文本本身變大了。因?yàn)檫吙驅(qū)挾群瓦吘喽际窃?px 中設(shè)置的，它們保持不變，不會(huì)縮放。

但是請(qǐng)注意，如果將CSS中的 px? 更改為相應(yīng)的 rem 值，會(huì)發(fā)現(xiàn)線條和間距確實(shí)變大了！(zh-Hans)

所以，這里的總結(jié)是：

當(dāng)用戶更改字體大小時(shí)， px 值不會(huì)縮放。
em 和 rem 的值會(huì)隨字體大小成比例調(diào)整。

如果你想要一個(gè)交互式演示，將所有這些內(nèi)容聯(lián)系在一起，請(qǐng)查看最終的 CodePen；調(diào)整頂部的滑塊以查看修改文檔字體大小對(duì)各種元素的影響，基于它們使用的 CSS 單位。https://codepen.io/collinsworth/pen/KKepeMQ

選擇哪一個(gè)

因此，知道 em? 和 rem? 會(huì)隨字體大小縮放，但 px? 值不會(huì)，那么我們?cè)撛趺崔k？我們應(yīng)該永遠(yuǎn)不使用 px 嗎？

雖然我認(rèn)為如果你選擇這條路，你可能會(huì)沒(méi)事，但我仍然認(rèn)為 px 有其存在的意義。

我們知道當(dāng)用戶調(diào)整字體大小時(shí) px 值不會(huì)改變，這意味著像素單位實(shí)際上是某些美學(xué)元素的不錯(cuò)選擇。也許我們有一定的間距，我們不希望在字體大小變大時(shí)變得更大。（如果默認(rèn)情況下是一個(gè)大塊的負(fù)空間，也許允許它縮放到更大的尺寸是沒(méi)有意義的。）

也許有一些邊框大小我們不想改變，或者頁(yè)面上有用 CSS 創(chuàng)建的裝飾元素，在更大的字體大小下看起來(lái)效果不佳。也許我們不希望填充隨著字體大小的增加而膨脹。在所有這些情況下， px 仍然是一個(gè)不錯(cuò)的選擇。

我個(gè)人建議使用 rem? 來(lái)設(shè)置所有的大小。我只在想要與當(dāng)前字體大小成比例的東西（例如，與一些文本旁邊的圖標(biāo)應(yīng)該與字符的高度完全相同，并且在一側(cè)有半個(gè)字符的情況）中添加em 。我不會(huì)在任何地方使用 px ，除非是明確不想隨字體大小縮放的設(shè)計(jì)元素。

永遠(yuǎn)不要用 ?px 單位中設(shè)置 font-size ，除非你非常確定你在做什么，它會(huì)如何行動(dòng)，以及在你這樣做時(shí)它是否仍然可訪問(wèn)。

關(guān)于媒體查詢的重要說(shuō)明

出于與上述所有原因相同的原因，重要的是要避免在 @media? 查詢中使用 px? ；當(dāng)用戶縮放時(shí)，它將正常工作，但是使用 px 的媒體查詢將在用戶自己設(shè)置更大的字體大小時(shí)失敗。

@media (min-width: 800px) {
  /* Changing font size does NOT affect this breakpoint */
}

@media (min-width: 50rem) {
  /* Changing font size DOES affect this breakpoint */
}

這是因?yàn)殡S著字體大小的增加， 50rem? 會(huì)根據(jù)用戶的偏好變成不同的值，而 800px 則不會(huì)。

很可能，當(dāng)我們?yōu)檩^大的斷點(diǎn)編寫(xiě)CSS時(shí)，我們認(rèn)為有足夠的屏幕空間讓元素?cái)U(kuò)展。如果用戶設(shè)置了非常大的字體大小，則可能不是這種情況，將媒體查詢?cè)O(shè)置為 rem? 而不是 px 可以幫助我們避免這種假設(shè)并響應(yīng)用戶的偏好。

我在這個(gè)網(wǎng)站上遇到了這個(gè)問(wèn)題；我把所有的斷點(diǎn)都設(shè)置在 px 上。然而，當(dāng)我將默認(rèn)字體大小設(shè)置得更大時(shí)，我的媒體查詢沒(méi)有響應(yīng)，因?yàn)樗鼈內(nèi)匀恢徊榭雌聊坏南袼貙挾?。因此，我仍然有一個(gè)微小的側(cè)邊欄，里面塞滿了難以辨認(rèn)的巨大文本，因?yàn)槲覜](méi)有考慮用戶的偏好。在那之后，我立即改為 rem ，問(wèn)題得到了解決。

簡(jiǎn)而言之：在媒體查詢中，除非您確定自己知道在瀏覽器中設(shè)置自己的字體大小會(huì)對(duì)用戶產(chǎn)生什么影響，否則一定要避免使用 px 。

原文：https://joshcollinsworth.com/blog/never-use-px-for-font-size

分享題目：為什么你永遠(yuǎn)不應(yīng)該在CSS中使用px來(lái)設(shè)置字體大小
當(dāng)前網(wǎng)址：http://m.fisionsoft.com.cn/article/dpidiie.html