gpt4 book ai didi

css - 使用 rem 调整(字体)大小时 !important 声明的效果

转载 作者:太空宇宙 更新时间:2023-11-04 00:15:13 24 4
gpt4 key购买 nike

更新:请注意,我只在 Chrome(最新版本)中看到此问题。在 Firefox 中一切似乎都很好。

By definition :

The rem unit is relative to the root—or the <html>—element. That means that we can define a single font size on the <html> element and define all rem units to be a percentage of that.

让我用一个例子来解释我的情况......

相关 CSS:

html {
font-size: 87.5%;
}

body {
font-size: 17px;
font-size: 1.21428571rem;
}

code {
font-size: 14px !important;
font-size: 1rem !important;
}

我正在使用 !important声明覆盖内联代码的字体大小。

问题是,我注意到代码块的字体大小比 14px 小得多,很可能是 12px。但是如果我删除 !important声明并在特定的 code 上设置字体大小元素(样式化特定的内联代码元素),字体大小很好,看上去是 14px。

你知道如何!important吗?声明可能会影响 rem 中的大小的? (特别是考虑到我的情况。)

最佳答案

首先关闭!important是懒惰的编码并且对可维护性是危险的。它有毒并且破坏了 CSS(级联部分)的性质。不惜一切代价避免它。

第二个:

code {
font-size: 14px !important;
font-size: 1rem !important;
}

不妨这样写:

code {
font-size: 1rem !important;
}

第二条规则覆盖第一条(同样是 CSS 的级联特性)

rem代表 root em,它是顶级元素(即 html)的字体大小

你的规则是说 1 x html 元素的 em,是浏览器默认值的 87.5%。

编辑:

你的 <p>标签有一个 font-size 100% 继承自最终继承自 body 的父元素和 body有一个 1.2142857rem大约为 17px 这就是为什么您看到字体大小不同的原因,等宽字体和无衬线字体的差异也加剧了这种差异。

关于css - 使用 rem 调整(字体)大小时 !important 声明的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11566043/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com