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中定义每个具有font-size的子节点。
使用javascript更改顶级容器的字体大小。

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

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

Answer 2

根据用户的选择，使用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：创建一个绑定到修改<body>字体大小的选择框的jQuery函数，从而更改基于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');
});

已更新：代码不再依赖于类

Answer 3

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

但是，您可以在同一样式表中使用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()时，您可以确保两个元素的大小始终完全相同。

Answer 4

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

.input {
     width:100px;
    }



 <input width:0.1em;>

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

4 个答案:

解决您的样本css ......

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