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

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

如果有什么不清楚的，我很乐意解释！谢谢大家

要解决您的示例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中的字体大小定义每个子节点
• 使用javascript更改顶级容器的字体大小

这里有一个小提琴的例子：

---

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

对任何要根据用户选择进行缩放的文本（或其他元素）使用

em

单位。并使用

rem

单位来处理想要保持相同大小的东西

---

CSS:REM单位将基于此值（10为基数，便于计算）

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>

---

---

更新：代码不再依赖于类

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

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

---

使用

calc（）

时，可以确保两个元素的大小始终完全相同。

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

.input {
     width:100px;
    }



 <input width:0.1em;>

.input{
宽度：100px；
}

请记住，任何您不想更改的内容都应该在

rem

单元中定义。谢谢J.C.我还想知道您如何处理旧浏览器的“rem”。我相信旧的浏览器不支持“rem”单元。那么你建议我在这种情况下使用“px”吗？定义这两个单元以获得最佳浏览器支持。首先定义

px

值，然后是

rem

版本，如下

font size:10px；字号：1rem。新浏览器将使用自上次声明以来的
rem
版本，旧浏览器将忽略“rem”并退回到
px
声明。如果你使用较少或SASS这里是一个可怕的啧啧：谢谢你的建议，巴博！我将尝试一下，看看这是否有效。我想应该是这样。另外，你知道我如何处理'li'标记吗？因为这是一个为我嵌套的标记，而'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');
});

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;
}

.input {
     width:100px;
    }



 <input width:0.1em;>