（新版）Python 分布式爬虫与 JS 逆向进阶实战-简拔皇心注

为什么你永远不应该在CSS中运用px来设置字体大小
（新版）Python 分布式爬虫与 JS 逆向进阶实战

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

代码部署后可能存在的BUG没法实时晓得，事后为理解决这些BUG，花了大量的时间停止log 调试，

在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中，作者讨论了为什么不应该运用像素（px）作为网页字体大小的单位[1]。作者指出，相关于容器、阅读器或用户的字体大小，px值是静态的。无论用户的字体偏好设置如何，当我们以静态像素设置值时，它将掩盖用户的选择，以我们指定确实切值替代。这意味着，假如我wu7的款式表运用像素单位，可能招致访问网站的用户难以阅读。

因而，作者倡议运用相对单位，如em、rem或百分比，而不是像素。这些单位是基于用户的字体大小偏好设置停止缩放的，从而提供了更好的可访问性和可读性。特别是在设计响应式网站时，相对单位可以进步跨设备的兼容性。经过运用相对单位，设计师能够确保网站在不同设备和阅读器中以适宜的字体大小显现[1]。

下面是正文：

在 Web 开发范畴中，有很多误解传播，即便它们被反驳了很屡次也依然存在。"外部链接应该总是在新标签页中翻开" 就是一个很好的例子。

案例证明：在CSS中， px ， em 或 rem 单位之间没有功用上的区别的想法是一个我一遍又一遍听到的误解，因而我想在这里发帖来处理这个问题。

我们要十分分明：在CSS中运用的单位绝对很重要。并且在设置时 font-size 应尽可能防止运用 px 。

我们在议论什么单位，它们是做什么的？
在我们讨论为什么应该防止运用 px 作为 font-size 之前，让我们确保我们都分明我们正在议论哪些单位，以及它们的普通行为。

px
px 是像素的缩写……固然如今大多数状况下它不再是一个真正的像素。在显现器通常是一个相对可预测的低分辨率像素比例，比方1024×768的时期， 1px 通常等于屏幕上的一个实践像素。

屏幕运用称为像素的彩色光点阵来显现图像。一个像素是显现器上的一个彩色光点；硬件可以呈现的最小可能的“点”。这就是我在本节中所说的“字面上的”、“实践的”或“设备”像素；物理世界中的一个像素。
但是，当高分辨率（有时称为“视网膜”）屏幕呈现时，设备开端将更多的像素紧缩到更小的空间中，这些物理设备像素变得十分微小。在高分辨率屏幕上阅读网页，假如CSS中的 1px 依然对应于一个字面设备像素，那么以至阅读任何内容都将十分艰难，由于像素自身正在疾速减少。毕竟，现代智能手机的分辨率以至比高清电视还要高。

所以如今， 1px 通常对应于放大的“缩放”像素的大小，而不是实践硬件上的字面像素。在我们的 CSS 中， 1px 的东西可能会占用多个物理硬件像素，而我们没有任何纯 CSS 的办法来指定一个字面设备像素。但这没关系，由于它们通常太小了，我们不想去处置它们。

一个例子：iPhone 14 Pro 上的像素十分微小，16px 在字面上的设备像素大小大约相当于2pt字号的印刷字体大小。好在阅读器为我们缩放了它们！
大多数状况下，这些并不在本讨论的语境中真正重要，但我以为理解这些还是很好的。重要的局部是： 1px 等于阅读器视为单个像素的任何内容（即便在硬件屏幕上它不是真正的像素）。

em 和 rem
这就带我们来到了 em 和 rem ，它们彼此类似。继续讲述不严厉相关但依然有趣的小学问： "em" 是一个排版术语，实践上比计算机早了几十年。在排版上，一个 em 等于当前字体大小。

假如你将字体大小设置为 32pt（“pt”是另一个依然有时运用的旧排版术语），那么 1em 就是32pt。假如当前字体大小为 20px ，那么 1em = 20px。

在网页上，默许字体大小为 16px 。一些用户从不更改默许设置，但许多人会更改。但默许状况下， 1em 和 1rem 都将等于 16px 。

“Em” 最初是指 “M” 字符的宽度，这也是称号的由来。但如今它指的是当前字体大小，而不是特定字形的尺寸。
EM 和 REM 之间的区别
为了辨别这两者： 1rem 一直等于阅读器的字体大小，或者更精确地说是 html 元素的字体大小。 rem 代表“根em”，而网页的根是 标签。因而， 1rem = document 字体大小。（默许状况下，这是 16px ，但能够被用户掩盖。）

另一方面，em是当前元素的字体大小。看下面的CSS：

.container {
font-size: 200%;
}
p {
font-size: 1em;
}
思索到上述 CSS， .container 元素内的段落将会变成原来的两倍大小。这是由于 1em 表示“当前字体大小”，在 .container 内，它是200%。 1em × 200% = 2em （默许为 32px ）。

但是， .container 元素外的段落仍将是 1em 的正常字体大小（默许为 16px ）。

假如我们在上面的CSS中将 em 更改为 rem ，那么一切段落标签的字体大小将一直是阅读器的默许大小，无论它们在哪里。

font-size: 1em 同等于 font-size: 100% 。
em 和 % 单位在其他状况下并不总是等价的；例如， width: 1em 和 width: 100% 很可能会十分不同，由于此时百分比是基于父容器的宽度而不是其字体大小。但是，就 font-size 属性而言， % 和 em 是相同的。
总结一下：

1em 是当前元素的字体大小。
1rem （根em）是文档的字体大小（即阅读器的字体大小）。
好的，那就是单位的含义和来源。如今让我们答复为什么运用哪个单位很重要。

为什么这一切都很重要
再次强调的误解是：既然 1em 和 16px 相等，那么选择哪个单位并不重要。这似乎是合理的；假如 16px = 1rem ，那么选择哪种方式输入似乎并不重要。

记住， em 和 rem 是相对的；默许状况下，它们都（最终）基于阅读器的字体大小。

2rem 是阅读器字体大小的两倍； 0.5rem 是其一半，依此类推。因而，假如用户更改其首选字体大小，假如运用 em 和 rem ，则网站上的一切文本都会相应更改，就像应该的那样。 2rem 依然是该字体大小的两倍； 0.5rem 依然是其一半。

相比之下， px 值是静态的。无论容器、阅读器或用户的字体大小如何， 20px 只是 20px 。当设置静态像素值时，无论用户的字体偏好大小如何，它都会掩盖该选择并运用指定确实切值。

批判性地说，这意味着假如你的款式表运用 px 在任何中央设置 font-size ，那么基于该值的任何文本都将无法由用户更改。

那是十分糟糕的事情。它是不可访问的，以至可能会阻止某人完整运用该网站。

因而，固然可能存在一些有效的用例来解释这种行为，但它绝对不是你想要的默许行为。

这也是防止运用视口单位（如 vw 或 vh ）设置字体大小的十分好的理由。它们也是静态的，用户无法掩盖。
最多，像 calc(1rem + 1vw) 这样的值可能是能够承受的，由于它依然包含 rem 作为根底。即使如此，我仍倡议运用 clamp() 或媒体查询来设置最小和最大值，由于屏幕尺寸常常远远超出我们所希冀或测试的范围。
超出字体大小的差别
好的，如今让我们谈谈当我们不特别处置 font-size 属性时， px 和 em / rem 如何变化。

开发人员通常经过缩放页面来停止测试，我以为这就是本文中心误解的来源。当你缩放时，一切内容都会被缩放（放大或减少），在这种状况下，选择 px 或 em / rem 作为你的CSS单位通常并不重要。就缩放而言，两者的行为方式相同。而且，大多数视力良好的开发人员可能不会认识到其中还有更多内容。但是，棘手的问题是：

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

px 单位依然与屏幕上像素的缩放值相关联。 em 和 rem 与文档的字体大小相关联，而不是页面的缩放或比例。

为了演示，请看这个 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 单位。

假如你放大或减少，元素的大小和间隔坚持相对不变。也就是说：你放大得越多，那条线就越粗，段落之间的间距就越大。

为了便当起见，这里有一张截图，显现了同一支笔的400％缩放。文本、线条和间距都变大了4倍；它们相关于彼此的大小坚持不变：

当触及到缩放时， px 、 em 或 rem 之间没有真正的区别。但缩放并不是用户使网站更易用的独一办法。

如前所述，用户还能够指定默许和/或最小字体大小。当他们这样做时，功用开端分歧。

在下面的截图中，我已将Firefox的默许字体大小设置为 64px 。

将屏幕截图中的文本与其上方的文本停止比拟。请留意，这一次，行并没有变粗，段落之间的边距也没有成比例增加。只要文本自身变大了。由于边框宽度和边距都是在 px 中设置的，它们坚持不变，不会缩放。

但是请留意，假如将CSS中的 px 更改为相应的 rem 值，会发现线条和间距的确变大了！ (zh-Hans)

所以，这里的总结是：

当用户更改字体大小时， px 值不会缩放。
em 和 rem 的值会随字体大小成比例调整。
假如你想要一个交互式演示，将一切这些内容联络在一同，请查看最终的 CodePen；调整顶部的滑块以查看修正文档字体大小对各种元素的影响，基于它们运用的 CSS 单位。

选择哪一个
因而，晓得 em 和 rem 会随字体大小缩放，但 px 值不会，那么我们该怎样办？我们应该永远不运用 px 吗？

固然我以为假如你选择这条路，你可能会没事，但我依然以为 px 有其存在的意义。

我们晓得当用户调整字体大小时 px 值不会改动，这意味着像素单位实践上是某些美学元素的不错选择。或许我们有一定的间距，我们不希望在字体大小变大时变得更大。（假如默许状况下是一个大块的负空间，或许允许它缩放到更大的尺寸是没有意义的。）

或许有一些边框大小我们不想改动，或者页面上有用 CSS 创立的装饰元素，在更大的字体大小下看起来效果不佳。或许我们不希望填充随着字体大小的增加而收缩。在一切这些状况下， px 依然是一个不错的选择。

我个人倡议运用 rem 来设置一切的大小。我只在想要与当前字体大小成比例的东西（例如，与一些文本旁边的图标应该与字符的高度完整相同，并且在一侧有半个字符的状况）中添加 em 。我不会在任何中央运用 px ，除非是明白不想随字体大小缩放的设计元素。

永远不要用 px 单位中设置 font-size ，除非你十分肯定你在做什么，它会如何行动，以及在你这样做时它能否依然可访问。

关于媒体查询的重要阐明
出于与上述一切缘由相同的缘由，重要的是要防止在 @media 查询中运用 px ；当用户缩放时，它将正常工作，但是运用 px 的媒体查询将在用户本人设置更大的字体大小时失败。

@media (min-width: 800px) {
/* Changing font size does NOT affect this breakpoint */
}
@media (min-width: 50rem) {
/* Changing font size DOES affect this breakpoint */
}
这是由于随着字体大小的增加， 50rem 会依据用户的偏好变成不同的值，而 800px 则不会。

很可能，当我们为较大的断点编写CSS时，我们以为有足够的屏幕空间让元素扩展。假如用户设置了十分大的字体大小，则可能不是这种状况，将媒体查询设置为 rem 而不是 px 能够协助我们防止这种假定并响应用户的偏好。

我在这个网站上遇到了这个问题；我把一切的断点都设置在 px 上。但是，当我将默许字体大小设置得更大时，我的媒体查询没有响应，由于它们依然只查看屏幕的像素宽度。因而，我依然有一个微小的侧边栏，里面塞满了难以识别的宏大文本，由于我没有思索用户的偏好。在那之后，我立刻改为 rem ，问题得到理解决。

简而言之：在媒体查询中，除非您肯定本人晓得在阅读器中设置本人的字体大小会对用户产生什么影响，否则一定要防止运用 px 。