我可以在同一个样式表（CSS）中同时使用 px 和 em 吗？
Posted
技术标签:
【中文标题】我可以在同一个样式表（CSS）中同时使用 px 和 em 吗？【英文标题】：Can I use both px and em in the same style sheet(CSS)? 【发布时间】：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 标记添加一个类，该类将包含指定的字体大小，并且其他所有内容都应该是可扩展的。
如果有不清楚的地方，我很乐意解释！多谢你们！
【问题讨论】：
【参考方案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”在这里不能很好地工作。以上是关于我可以在同一个样式表（CSS）中同时使用 px 和 em 吗？的主要内容，如果未能解决你的问题，请参考以下文章