gpt4 book ai didi

css - 如何轻松地将现有大型网站的字体大小从 px 更改为 em?

转载 作者:行者123 更新时间:2023-12-04 20:22:07 27 4
gpt4 key购买 nike

如何轻松地将现有大型网站的字体大小从 px 更改为 em

有什么快速做到这一点的技巧吗?

最佳答案

这取决于您现有的样式表,但我担心它可能不会很快(假设您希望网站在完成后看起来一样)。

潜在问题

当文本的大小以像素为单位时,文本的视觉大小将与您在 CSS 中放置的大小相同。例如,CSS p {font-size: 12px;}将导致所有 <p>字体大小为 12 像素的标签。

但是,当文本以 em 为单位大小时,视觉大小是相对于其最近祖先的字体大小计算的。

所以,如果您有以下 CSS:

body {font-size: .625em;}

p {font-size: 1.2em;}

.header {font-size: 1.5em;}

以及以下 HTML:

<body>

<p>Paragraph</p>

<div class="header>
<p>Paragraph inside header</p>
</div>

</body>

那么第一个段落的视觉字体大小将为 1.2(段落大小)× .625(正文字体大小)× 16 像素(所有现代浏览器的默认根字体大小)= < strong>12 像素。

第二个段落的视觉大小为 1.2(段落大小)× 1.5(.header 的大小)× .625 × 16 像素 = 18 像素.

如果您没有大量相互嵌套的具有不同字体大小的 HTML 元素,那么就可以了。但是您需要自己在 HTML 中进行检查 — 仅从样式表可能很难判断,尤其是在大型网站的情况下。

方法

就方法而言,在 ems 中调整字体大小时,如果您的网站设计没有太多不同的字体大小,这是最简单的。我更喜欢设置 <body>元素到最常用的字体大小,例如

body {
font-size: .75em;/* 12px */
}

然后您在需要时更改它,例如

h2 {
font-size: 1.5em; /* 16px */
}

否则,您最终可能会在嵌套发生时调整大小。例如,这可能特别烦人。 <li>

当然,这种方法只有在网站设计不包含大量不同字体大小的情况下才有效。

有些人设body0.625em因为那等于 10px (16 × 0.625 = 10),意思是对于没有设置字体大小的祖先的元素,1em = 10px , 1.1em = 11px等等。就我个人而言,我认为这增加的复杂性多于消除的复杂性,但我从未做过比较。

无论哪种方式,我发现在每次使用 font-size 后将预期的视觉字体大小放在评论中真的很有帮助。 , 如上。这样,您就会记住元素在 HTML 中重新嵌套时的字体大小。

关于css - 如何轻松地将现有大型网站的字体大小从 px 更改为 em?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3879365/

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