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

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

css

Css 如何轻松地将现有大型站点的字体大小从px更改为em？,css,xhtml,Css,Xhtml,如何轻松地将现有大型站点的字体大小从px更改为em 有什么快速的方法吗打开css文件搜索px，看看有多少有不同尺寸的决定转换，例如10px =0.5em，12px=1em 搜索/替换每个尺寸这取决于您现有的样式表，但恐怕不会很快完成（假设您希望完成后的站点外观相同）潜在问题当文本的大小以像素为单位时，文本的视觉大小将与CSS中的大小相同。例如，CSSp{font size:12px；}将导致所有标记的字体大小为12像素但是，当文本在ems中调整大小时，视觉大小是相对于其最近祖先的

如何轻松地将现有大型站点的字体大小从

px

更改为

em

有什么快速的方法吗

打开css文件

搜索px，看看有多少有不同尺寸的

决定转换，例如10px =0.5em，12px=1em

搜索/替换每个尺寸

这取决于您现有的样式表，但恐怕不会很快完成（假设您希望完成后的站点外观相同）

潜在问题当文本的大小以像素为单位时，文本的视觉大小将与CSS中的大小相同。例如，CSS

p{font size:12px；}

将导致所有

标记的字体大小为12像素

但是，当文本在ems中调整大小时，视觉大小是相对于其最近祖先的字体大小计算的

因此，如果您有以下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>

那么你只有在需要的时候才能改变，例如

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

否则，当嵌套发生时，最终可能会大量调整大小。这对于例如

s来说尤其烦人

当然，这种方法只有在网站的设计没有包含很多不同的字体大小时才有效

有些人将

body

设置为

0.625em

，因为这等于

10px

（16×0.625=10），这意味着元素没有设置字体大小的祖先，

1em

10px

，

1.1em

11px

等等。就我个人而言，我认为这增加了比消除了更多的复杂性，但我从未做过比较

无论哪种方式，我发现在每次使用

font-size

之后，将预期的视觉字体大小放入注释中非常有用，如上所述。这样，如果元素在HTML中重新嵌套，您就可以记住该元素的字体大小。

通过CSS搜索并替换？；-）只是字体大小？元素本身的大小呢？@Nivas：我们明天再谈吧，我们不想让这个可怜的家伙发疯。你忽略了5）。回归测试站点并处理从绝对单元更改为相对单元的结果，这将不是一个无缝的转换。是的，这不起作用，因为元素将嵌套，因此em转换将取决于元素驻留在DOM层次结构的哪个级别。Bump。改变这一点应该相对容易，但要处理意想不到的后果需要花费3倍的时间。

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