我可以在同一个样式表（CSS）中同时使用 px 和 em 吗？答案

【问题标题】：Can I use both px and em in the same style sheet(CSS)?我可以在同一个样式表（CSS）中同时使用 px 和 em 吗？
【发布时间】：2014-10-30 23:45:07
【问题描述】：

我想知道我是否可以在同一个 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 标记添加一个类，该类将包含指定的字体大小，并且其他所有内容都应该是可扩展的。

如果有不清楚的地方，我很乐意解释！多谢你们！

【问题讨论】：

标签： html css font-size em

【解决方案1】：

不能在同一个css中定义，但是可以这样定义。

.input {
     width:100px;
    }



 <input width:0.1em;>

【讨论】：

【解决方案2】：

我知道这不是真正的问题，但我来这里是为了寻找另一个答案，所以无论如何我都会发布它。（关于您的问题，显然用不同的单位定义相同的属性两次是没有意义的，但请检查其他答案。）

但是是的，您可以在同一个样式表中使用 em 和 px，甚至可以在同一属性中使用 em 和 px！

body {
    font-size: 12px;
}
.footnote {
    font-size: 0.7em;
}
input {
    padding: 0.5em;
    border: 1px solid #666;
}
.input-replace {
    padding: calc(0.5em - 3px);
    border: 4px solid #eee;
}

当您使用calc() 时，您可以确保两个元素的大小始终完全相同。

【讨论】：

【解决方案3】：

对您想要根据用户选择进行缩放的任何文本（或其他元素）使用em 单位。并使用rem 单位来表示您希望保持相同大小的东西。

DEMO EXAMPLE

CSS： REM 单位将基于此值（以 10 为底，便于计算）

html { font-size:10px; }

HTML：用户可以选择他们想要的页面字体大小

<select id="sizeSelector">
  <option value="10px">Extra Small</option>
  <option value="12px">Small</option>
  <option value="14px">Normal</option>
  <option value="16px">Large</option>
  <option value="18px">Extra Large</option>
</select>

JS：创建一个 jQuery 函数，绑定到修改 <body>font-size 的选择框，从而更改基于 em 的声明：

$(document).ready(function() {
  $("#sizeSelector").change(function(e) {
    $("body").css('fontSize', e.target.value);
  });

  // initialize font size for first page load
  $("#sizeSelector").prop("selectedIndex", 2).trigger('change');
});

更新：代码不再依赖于类

【讨论】：

请记住，您不想更改的任何内容都应以rem 为单位进行定义。
谢谢 J.C. 我还想知道你的方法是如何解决旧浏览器的“rem”问题。我相信旧浏览器不支持“rem”单位。那么你建议我在这种情况下使用“px”吗？
定义两个单元以获得最佳浏览器支持。您将首先定义px 值，然后是rem 版本，就像font-size:10px; font-size:1rem; 一样。新浏览器将使用自上次声明的rem 版本，旧浏览器将忽略“rem”并回退到px 声明。如果您使用 LESS 或 SASS，这里是一个很棒的 tut：drublic.de/blog/rem-fallback-sass-less

【解决方案4】：

解决您的示例 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;
}

好消息是你在正确的轨道上......

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

这是一个小提琴示例：http://jsfiddle.net/pabo/pn1tyaxb/

请注意，按钮，实际上是您选择的顶级容器之外的任何内容，都不会受到重新缩放的影响。

【讨论】：

感谢帕博的建议！我会试试这个，看看这是否有效。我的猜测是应该的。另外，你知道我如何处理“li”标签，因为这是为我嵌套的标签，而“em”在这里不能很好地工作。