為什么你永遠不應(yīng)該在CSS中運用px來設(shè)置字體大小
（新版）Python 分布式爬蟲與 JS 逆向進階實戰(zhàn)

download：https://www.zxit666.com/5967/

代碼部署后可能存在的BUG沒法實時曉得，事后為理解決這些BUG，花了大量的時間停止log 調(diào)試，

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

因而，作者倡議運用相對單位，如em、rem或百分比，而不是像素。這些單位是基于用戶的字體大小偏好設(shè)置停止縮放的，從而提供了更好的可訪問性和可讀性。特別是在設(shè)計響應(yīng)式網(wǎng)站時，相對單位可以進步跨設(shè)備的兼容性。經(jīng)過運用相對單位，設(shè)計師能夠確保網(wǎng)站在不同設(shè)備和閱讀器中以適宜的字體大小顯現(xiàn)[1]。

下面是正文：

在 Web 開發(fā)范疇中，有很多誤解傳播，即便它們被反駁了很屢次也依然存在。"外部鏈接應(yīng)該總是在新標(biāo)簽頁中翻開" 就是一個很好的例子。

案例證明：在CSS中， px ， em 或 rem 單位之間沒有功用上的區(qū)別的想法是一個我一遍又一遍聽到的誤解，因而我想在這里發(fā)帖來處理這個問題。

我們要十分分明：在CSS中運用的單位絕對很重要。并且在設(shè)置時 font-size 應(yīng)盡可能防止運用 px 。

我們在議論什么單位，它們是做什么的？
在我們討論為什么應(yīng)該防止運用 px 作為 font-size 之前，讓我們確保我們都分明我們正在議論哪些單位，以及它們的普通行為。

px
px 是像素的縮寫……固然如今大多數(shù)狀況下它不再是一個真正的像素。在顯現(xiàn)器通常是一個相對可預(yù)測的低分辨率像素比例，比方1024×768的時期， 1px 通常等于屏幕上的一個實踐像素。

屏幕運用稱為像素的彩色光點陣來顯現(xiàn)圖像。一個像素是顯現(xiàn)器上的一個彩色光點；硬件可以呈現(xiàn)的最小可能的“點”。這就是我在本節(jié)中所說的“字面上的”、“實踐的”或“設(shè)備”像素；物理世界中的一個像素。
但是，當(dāng)高分辨率（有時稱為“視網(wǎng)膜”）屏幕呈現(xiàn)時，設(shè)備開端將更多的像素緊縮到更小的空間中，這些物理設(shè)備像素變得十分微小。在高分辨率屏幕上閱讀網(wǎng)頁，假如CSS中的 1px 依然對應(yīng)于一個字面設(shè)備像素，那么以至閱讀任何內(nèi)容都將十分艱難，由于像素自身正在疾速減少。畢竟，現(xiàn)代智能手機的分辨率以至比高清電視還要高。

所以如今， 1px 通常對應(yīng)于放大的“縮放”像素的大小，而不是實踐硬件上的字面像素。在我們的 CSS 中， 1px 的東西可能會占用多個物理硬件像素，而我們沒有任何純 CSS 的辦法來指定一個字面設(shè)備像素。但這沒關(guān)系，由于它們通常太小了，我們不想去處置它們。

一個例子：iPhone 14 Pro 上的像素十分微小，16px 在字面上的設(shè)備像素大小大約相當(dāng)于2pt字號的印刷字體大小。好在閱讀器為我們縮放了它們！
大多數(shù)狀況下，這些并不在本討論的語境中真正重要，但我以為理解這些還是很好的。重要的局部是： 1px 等于閱讀器視為單個像素的任何內(nèi)容（即便在硬件屏幕上它不是真正的像素）。

em 和 rem
這就帶我們來到了 em 和 rem ，它們彼此類似。繼續(xù)講述不嚴厲相關(guān)但依然有趣的小學(xué)問： "em" 是一個排版術(shù)語，實踐上比計算機早了幾十年。在排版上，一個 em 等于當(dāng)前字體大小。

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

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

“Em” 最初是指 “M” 字符的寬度，這也是稱號的由來。但如今它指的是當(dāng)前字體大小，而不是特定字形的尺寸。
EM 和 REM 之間的區(qū)別
為了辨別這兩者： 1rem 一直等于閱讀器的字體大小，或者更精確地說是 html 元素的字體大小。 rem 代表“根em”，而網(wǎng)頁的根是 標(biāo)簽。因而， 1rem = document 字體大小。（默許狀況下，這是 16px ，但能夠被用戶掩蓋。）

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

.container {
font-size: 200%;
}
p {
font-size: 1em;
}
思索到上述 CSS， .container 元素內(nèi)的段落將會變成原來的兩倍大小。這是由于 1em 表示“當(dāng)前字體大小”，在 .container 內(nèi)，它是200%。 1em × 200% = 2em （默許為 32px ）。

但是， .container 元素外的段落仍將是 1em 的正常字體大小（默許為 16px ）。

假如我們在上面的CSS中將 em 更改為 rem ，那么一切段落標(biāo)簽的字體大小將一直是閱讀器的默許大小，無論它們在哪里。

font-size: 1em 同等于 font-size: 100% 。
em 和 % 單位在其他狀況下并不總是等價的；例如， width: 1em 和 width: 100% 很可能會十分不同，由于此時百分比是基于父容器的寬度而不是其字體大小。但是，就 font-size 屬性而言， % 和 em 是相同的。
總結(jié)一下：

1em 是當(dāng)前元素的字體大小。
1rem （根em）是文檔的字體大小（即閱讀器的字體大?。?br/>好的，那就是單位的含義和來源。如今讓我們答復(fù)為什么運用哪個單位很重要。

為什么這一切都很重要
再次強調(diào)的誤解是：既然 1em 和 16px 相等，那么選擇哪個單位并不重要。這似乎是合理的；假如 16px = 1rem ，那么選擇哪種方式輸入似乎并不重要。

記住， em 和 rem 是相對的；默許狀況下，它們都（最終）基于閱讀器的字體大小。

2rem 是閱讀器字體大小的兩倍； 0.5rem 是其一半，依此類推。因而，假如用戶更改其首選字體大小，假如運用 em 和 rem ，則網(wǎng)站上的一切文本都會相應(yīng)更改，就像應(yīng)該的那樣。 2rem 依然是該字體大小的兩倍； 0.5rem 依然是其一半。

相比之下， px 值是靜態(tài)的。無論容器、閱讀器或用戶的字體大小如何， 20px 只是 20px 。當(dāng)設(shè)置靜態(tài)像素值時，無論用戶的字體偏好大小如何，它都會掩蓋該選擇并運用指定確實切值。

批判性地說，這意味著假如你的款式表運用 px 在任何中央設(shè)置 font-size ，那么基于該值的任何文本都將無法由用戶更改。

那是十分糟糕的事情。它是不可訪問的，以至可能會阻止某人完整運用該網(wǎng)站。

因而，固然可能存在一些有效的用例來解釋這種行為，但它絕對不是你想要的默許行為。

這也是防止運用視口單位（如 vw 或 vh ）設(shè)置字體大小的十分好的理由。它們也是靜態(tài)的，用戶無法掩蓋。
最多，像 calc(1rem + 1vw) 這樣的值可能是能夠承受的，由于它依然包含 rem 作為根底。即使如此，我仍倡議運用 clamp() 或媒體查詢來設(shè)置最小和最大值，由于屏幕尺寸常常遠遠超出我們所希冀或測試的范圍。
超出字體大小的差別
好的，如今讓我們談?wù)劗?dāng)我們不特別處置 font-size 屬性時， px 和 em / rem 如何變化。

開發(fā)人員通常經(jīng)過縮放頁面來停止測試，我以為這就是本文中心誤解的來源。當(dāng)你縮放時，一切內(nèi)容都會被縮放（放大或減少），在這種狀況下，選擇 px 或 em / rem 作為你的CSS單位通常并不重要。就縮放而言，兩者的行為方式相同。而且，大多數(shù)視力良好的開發(fā)人員可能不會認識到其中還有更多內(nèi)容。但是，棘手的問題是：

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

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

為了演示，請看這個 CodePen

HTML CSSResult Skip Results Iframe
EDIT ON
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam eum aliquam eveniet.</p>
<p>Sapiente delectus in ab excepturi, commodi placeat quaerat saepe voluptas sunt numquam.</p>
<p>Rerum veniam, quidem voluptatibus deleniti nihil consequatur blanditiis explicabo eum quos. Nam.</p>
<p>Natus necessitatibus delectus neque tenetur sint illum obcaecati similique sequi doloribus eligendi?</p>
<p>Eos quidem iure debitis dolorum repellendus ab incidunt ipsam suscipit, autem consequuntur?</p>
p {
border-bottom: 2px solid black;
margin-top: 0;
margin-bottom: 20px;
}
我們有幾個段落，每個段落底部有 2px 邊框，并且它們之間有 20px 邊距。請留意，我們對兩者都運用 px 單位。

假如你放大或減少，元素的大小和間隔堅持相對不變。也就是說：你放大得越多，那條線就越粗，段落之間的間距就越大。

為了便當(dāng)起見，這里有一張截圖，顯現(xiàn)了同一支筆的400％縮放。文本、線條和間距都變大了4倍；它們相關(guān)于彼此的大小堅持不變：

當(dāng)觸及到縮放時， px 、 em 或 rem 之間沒有真正的區(qū)別。但縮放并不是用戶使網(wǎng)站更易用的獨一辦法。

如前所述，用戶還能夠指定默許和/或最小字體大小。當(dāng)他們這樣做時，功用開端分歧。

在下面的截圖中，我已將Firefox的默許字體大小設(shè)置為 64px 。

將屏幕截圖中的文本與其上方的文本停止比擬。請留意，這一次，行并沒有變粗，段落之間的邊距也沒有成比例增加。只要文本自身變大了。由于邊框?qū)挾群瓦吘喽际窃?px 中設(shè)置的，它們堅持不變，不會縮放。

但是請留意，假如將CSS中的 px 更改為相應(yīng)的 rem 值，會發(fā)現(xiàn)線條和間距的確變大了！ (zh-Hans)

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

當(dāng)用戶更改字體大小時， px 值不會縮放。
em 和 rem 的值會隨字體大小成比例調(diào)整。
假如你想要一個交互式演示，將一切這些內(nèi)容聯(lián)絡(luò)在一同，請查看最終的 CodePen；調(diào)整頂部的滑塊以查看修正文檔字體大小對各種元素的影響，基于它們運用的 CSS 單位。

選擇哪一個
因而，曉得 em 和 rem 會隨字體大小縮放，但 px 值不會，那么我們該怎樣辦？我們應(yīng)該永遠不運用 px 嗎？

固然我以為假如你選擇這條路，你可能會沒事，但我依然以為 px 有其存在的意義。

我們曉得當(dāng)用戶調(diào)整字體大小時 px 值不會改動，這意味著像素單位實踐上是某些美學(xué)元素的不錯選擇?；蛟S我們有一定的間距，我們不希望在字體大小變大時變得更大。（假如默許狀況下是一個大塊的負空間，或許允許它縮放到更大的尺寸是沒有意義的。）

或許有一些邊框大小我們不想改動，或者頁面上有用 CSS 創(chuàng)立的裝飾元素，在更大的字體大小下看起來效果不佳。或許我們不希望填充隨著字體大小的增加而收縮。在一切這些狀況下， px 依然是一個不錯的選擇。

我個人倡議運用 rem 來設(shè)置一切的大小。我只在想要與當(dāng)前字體大小成比例的東西（例如，與一些文本旁邊的圖標(biāo)應(yīng)該與字符的高度完整相同，并且在一側(cè)有半個字符的狀況）中添加 em 。我不會在任何中央運用 px ，除非是明白不想隨字體大小縮放的設(shè)計元素。

永遠不要用 px 單位中設(shè)置 font-size ，除非你十分肯定你在做什么，它會如何行動，以及在你這樣做時它能否依然可訪問。

關(guān)于媒體查詢的重要闡明
出于與上述一切緣由相同的緣由，重要的是要防止在 @media 查詢中運用 px ；當(dāng)用戶縮放時，它將正常工作，但是運用 px 的媒體查詢將在用戶本人設(shè)置更大的字體大小時失敗。

@media (min-width: 800px) {
/* Changing font size does NOT affect this breakpoint */
}
@media (min-width: 50rem) {
/* Changing font size DOES affect this breakpoint */
}
這是由于隨著字體大小的增加， 50rem 會依據(jù)用戶的偏好變成不同的值，而 800px 則不會。

很可能，當(dāng)我們?yōu)檩^大的斷點編寫CSS時，我們以為有足夠的屏幕空間讓元素擴展。假如用戶設(shè)置了十分大的字體大小，則可能不是這種狀況，將媒體查詢設(shè)置為 rem 而不是 px 能夠協(xié)助我們防止這種假定并響應(yīng)用戶的偏好。

我在這個網(wǎng)站上遇到了這個問題；我把一切的斷點都設(shè)置在 px 上。但是，當(dāng)我將默許字體大小設(shè)置得更大時，我的媒體查詢沒有響應(yīng)，由于它們依然只查看屏幕的像素寬度。因而，我依然有一個微小的側(cè)邊欄，里面塞滿了難以識別的宏大文本，由于我沒有思索用戶的偏好。在那之后，我立刻改為 rem ，問題得到理解決。

簡而言之：在媒體查詢中，除非您肯定本人曉得在閱讀器中設(shè)置本人的字體大小會對用戶產(chǎn)生什么影響，否則一定要防止運用 px 。