如何挽救 `html { font-size: 62.5%; }` 情况下,当我向页面添加新的文本元素时,默认情况下它们不是那么小?

How to salvage an `html { font-size: 62.5%; }` situation, so that when I add new text elements to the page they aren't so tiny by default?

我们有一个已经开发了将近十年的网站的问题:大多数新元素的默认 font-size 太小,一些利益相关者无法舒适地阅读。

你可能会说这很奇怪!默认的 font-size: 16px 大小不是很合理吗?我不能将 root/body 字体大小增加到一些合理的默认值吗?

哎呀,有问题!

不幸的是,这个网站是在将根字体大小设置为 10 (!) 像素并且不仅使文本而且 element/box 大小都是相对的之后开始的到那个程度! (请参阅 or https://benfrain.com/just-use-pixels/ 了解一些回顾。)所以我想事后看来是 20/20 — 现在如果我简单地更改“默认”(根)字体大小,大约 89% 的布局将随之增长。想象一下,如果您所有的乐高迷你人偶突然变大到 Fisher-Price 人的大小……除了这里随机 arm/leg 具有固定大小,或者缩放与那边的其他东西相关的眉毛!

是否有任何类型的“逃生舱门”——开箱即用的 CSS 聪明或一些 LESS 编译器技巧——可能让我:

无需:

我在这里可能有点厚,但你不能回到旧的“搜索和替换”吗?

获取项目中使用的尺寸列表,快速搜索“\d{1,3}\.?\d{0,5}rem”应该涵盖大多数情况,然后只需过滤列表即可。 (1-3位,可选小数点,可选1-5位,然后REM)。

首先在 REM 中搜索任何尺寸,将“1.6rem”变为“1rem”,将“2.4rem”变为“1.5rem”等

现在你可能会在这里看到一个问题,你不能一次完成,因为你显然会遇到这样一种情况,你改变了一个值,然后它在进一步的搜索和替换中发生冲突(你改变了从 3.2rem 到 2rem 的值,然后通过更改所有 2rem 大小并无意中更改较大的项目)。

相反,我将设置的值比第一次传递时需要的值大 100 倍,然后将它们全部减少 100。 (所以 3.2rem 会在第一次通过时变为 200rem,然后在第二次通过时 200rem 变为 2rem,显然,如果你在任何地方使用 100+rem,然后将其更改为 2000rem 等)

然后,一旦完成所有这些操作,只需将根字体大小从 62.5% 更改为 100%。

这应该能解决大约 95% 的问题,就好像有人正在使用 em 单位,它所使用的基本单位最终应该具有相同的大小。

通过这种方法,我看不到您必须在使用 REM 进行 div 大小调整等的巨大应用程序中进行超过 50 次搜索和替换。

我想不出这种方法有什么“难点”,但我相信在你这样做之前肯定会有一些备份!