html - 我可以在同一个样式表中同时使用 px 和 em 吗？

Question

我想知道我是否可以在同一个 CSS 文件中同时使用 px 和 em(对于相同的标签/类)。我的意思是，我可以有这样的东西吗:-

body{
    font-size: 10px; 
    font-size: 0.625em;
    font-weight: normal;
    font-family: arial;
    margin: 0px auto;
    color: #333333;
    background: #E0E0E0;
}

我的目标是转换一个支持“em”的非常大的 CSS 文件，以便用户可以决定他们想要使用的字体大小。但我的问题是“em”的有据可查的问题 - 嵌套标签受到影响。

我通过在某些地方使用“rem”而不是“em”来寻求帮助。虽然有点帮助，但我丢失了网页的整个结构。

我想在我的网页中保持完全相同的字体大小，并且仍然支持想要更改字体大小的用户。

我正在使用 jQuery 将一个类添加到包含指定字体大小的 body 标记，其他所有内容都应该是可缩放的。

Answer 1

处理您的示例 CSS...

您可以随心所欲地混合 px 和 em(以及百分比)。这很好:

body{
    font-size: 10px; 
    margin: 0px auto;
}

您不能两次定义相同的 css 属性。嗯，从技术上讲您可以，但只会应用其中一个。所以这是坏的:

body{
    font-size: 10px; 
    font-size: 0.625em;
}

但这与混合px和em无关。这也坏了:

body{
    font-size: 10px; 
    font-size: 20px;
}

好消息是你走对了路......

• 定义一些顶级容器，或主体，以像素为单位的字体大小。
• 定义每一个子节点，font-size 为 em。
• 使用 javascript 更改顶级容器的字体大小。

这是一个 fiddle 示例:http://jsfiddle.net/pabo/pn1tyaxb/

请注意，按钮以及您选择的顶级容器之外的所有内容都不会受到重新缩放的影响。