Question

我的问题是如何设置我的默认文字大小，以便我可以将px的文字大小传输到em？

在This主题上，有人解释说em的工作是一个比例，因此我的文本在移动设备上会是一个合适的尺寸，但是如何设置我的默认文字大小以便我可以设置我的em尺寸？

*编辑：要轻微改写，如何使用em设置我缩放的测量值？

Answer 1

您可以在body元素上设置文档的默认文本大小。

body {
    font-size: 100%;
}

这会将基本字体大小设置为100％ - 在大多数浏览器中大约为16px。然后，您可以指定与此相关的字体大小。

例如：

h1 {
    font-size: 2em; // This will render at 200% of the base font so around 32px
}

small {
    font-size: .5em // This will render at 50% of the base font size
}

请记住，虽然这些与他们的父母有关，但是在<small>中放置一个<h1>元素将意味着小元素将呈现其父元素的50％ - 在这种情况下回到基本字体大小...混淆吧？

为了抵消这种情况，我会使用rem而不是em（使用字体像素也没有错误）。 rem单位始终引用父元素 - 因此.5rem始终为基本字体大小的50％，无论父级大小如何。

希望有所帮助。

Answer 2

将你的身体设为百分比，其余部分设为ems：

body { font-size:62.5%}; // this means 10 px

div { font-size:2em} // this will be 20px
p { font-size:1em} // this will be 10px

依旧......

Answer 3

通常我将身体大小设置为固定的像素，然后是其余部分：

body {
    font-size: 14px;
}
p {
    font-size: 1em;
}
h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.8em;
}

这得到p大小为14px，h1为28px，h2为25px。

同样，如果您想使用浏览器使用的任何大小，只需使用：

body {
    font-size: 1em;
}

Answer 4

用Em设置字体大小

h1 {font-size:2.5em;} // 40px/16=2.5em 

h2 {font-size:1.875em;} // 30px/16=1.875em 

p {font-size:0.875em;} // 14px/16=0.875em

如何将字体大小更改为em

4 个答案: