怎么在css里面使用rem,我应该在CSS中使用px或rem值单位吗？

我想赞扬josh3736提供一些优秀历史背景的答案。虽然它很清晰，但自从提出这个问题以来，近五年来CSS的格局发生了变化。当问到这个问题时，答案px 是正确的，但今天不再适用。

tl;博士：使用rem

单位概述

历史上，px单位通常表示一个设备像素。对于具有越来越高像素密度的设备，这种设备不再适用于许多设备，例如Apple的Retina Display。

rem单位代表r oot em大小。这font-size是任何匹配:root。在HTML的情况下，它是元素; 对于SVG来说，这是元素。font-size每个浏览器* 的默认值为16px。

关于使用 px

互联网上的大多数CSS示例使用px值，因为它们是事实上的标准。pt，理论上可以使用in各种其他单位，但它们并没有很好地处理小值，因为你很快就需要求助于分数更长的分数，并且更难以推理。

如果你想要一个薄边框，px你可以使用1px，pt你需要使用0.75pt一致的结果，这不是很方便。

关于使用 rem

rem它的默认值16px对于它的使用来说不是一个非常强大的论据。写作0.0625rem是更糟比写0.75pt，那么为什么会有人使用rem？

rem与其他单位相比，它有两个优势。用户偏好受到尊重

您可以将表观px值更改为rem您想要的任何值

尊重用户首选项

多年来，浏览器缩放发生了很大变化。从历史上看，许多浏览器只能扩展font-size，但当网站意识到他们美丽的像素完美设计在任何人放大或缩小时都会破坏时，这种情况发生了很大变化。此时，浏览器会缩放整个页面，因此基于字体的缩放不在图中。

尊重用户的愿望并非如此。仅仅因为浏览器16px默认设置为，并不意味着任何用户都无法改变他们的偏好24px或32px纠正不良视力。如果您的单位基础不合适rem，任何字体较大的用户都会看到比例较大的网站。边界将更大，填充将更大，利润将更大，一切都将流畅地扩大。

如果您的媒体查询基于rem，您还可以确保用户看到的网站适合他们的屏幕。与用户font-size设置为32px一个640px广泛的浏览器，将有效地看到您的网站在向用户展示16px一个320px广泛的浏览器。RWD在使用过程中绝对没有任何损失rem。

改变表观px价值

由于rem是基于font-size对的:root节点，如果你想改变什么1rem代表，你所要做的就是改变font-size：:root {

font-size: 100px;}body {

font-size: 1rem;}

Don't ever actually do this, please

无论你做什么，都不要将:root元素设置font-size为px值。

如果将font-sizeon 设置html为某个px值，则会忘记用户的偏好，而无法将其取回。

如果要更改表观值rem，请使用%单位。

对此的数学计算是相当直截了当的。

明显的字体大小:root是16px，但是我们想把它改成20px。我们需要做的就是乘以16一些值得到20。

设置你的等式：16 * X = 20

并解决X：X = 20 / 16X = 1.25X = 125%:root {

font-size: 125%;}

If you're using the default font-size, I'm 20px tall.

做多件事20并不是那么好，但一个共同的建议是使表观尺寸rem等于10px。这个神奇的数字10/16是0.625，或者62.5%。:root {

font-size: 62.5%;}

If you're using the default font-size, I'm 10px tall.

现在的问题是，font-size页面其余部分的默认设置太小，但有一个简单的解决方法：设置font-size打开body使用rem：:root {

font-size: 62.5%;}body {

font-size: 1.6rem;}

I'm the default font-size

重要的是要注意，通过这种调整，表观值rem是10px，这意味着你可能写入的任何值都px可以rem通过碰撞小数位直接转换为。padding: 20px;

变成padding: 2rem;

您选择的明显字体大小取决于您，因此如果您想要没有理由不能使用：:root {

font-size: 6.25%;}body {

font-size: 16rem;}

和1rem平等1px。

所以你有它，一个简单的解决方案，以尊重用户的意愿，同时也避免过度复杂的CSS。

等等，所以抓到了什么？

我担心你会问这个问题。尽管我想假装它rem是神奇的并且解决所有问题，但仍然存在一些值得注意的问题。在我看来，没有任何破坏性的东西，但我会打电话给你，所以你不能说我没有警告你。

媒体查询(使用em)

您将遇到的第一个问题rem涉及媒体查询。请考虑以下代码：:root {

font-size: 1000px;}@media (min-width: 1rem) {

:root {

font-size: 1px;

}}

这里的rem变化值取决于媒体查询是否适用，媒体查询取决于它的值rem，那么究竟是怎么回事？

rem在媒体查询使用的初始值font-size和不应该(见的Safari部分)考虑到可能发生的任何变化font-size的的:root元件。换句话说，它的表面价值总是如此 16px。

这有点烦人，因为这意味着你必须做一些小数计算，但我发现大多数常见的媒体查询已经使用了16的倍数值。|   px | rem |+------+-----+|  320 |  20 ||  480 |  30 ||  768 |  48 || 1024 |  64 || 1200 |  75 || 1600 | 100 |

此外，如果您使用的是CSS预处理器，则可以使用mixins或变量来管理媒体查询，这将完全掩盖问题。

苹果浏览器

不幸的是，Safari存在一个已知错误，其中对:rootfont-size的更改实际上会更改rem媒体查询范围的计算值。如果在:root媒体查询中更改元素的字体大小，这可能会导致一些非常奇怪的行为。幸运的是，修复很简单：使用em单位进行媒体查询。

上下文切换

如果您在项目之间切换各种不同的项目，很可能表观字体大小rem将具有不同的值。在一个项目中，您可能正在使用表观大小10px，在另一个项目中的表面大小可能是1px。这可能会造成混淆并导致问题。

我在这里唯一的建议是坚持62.5%转换rem为表观大小10px，因为这在我的经验中更为常见。

共享的CSS库

如果您正在编写将在您无法控制的站点上使用的CSS，例如嵌入式窗口小部件，那么确实没有什么好方法可以知道它的外观尺寸rem。如果是这种情况，请随时继续使用px。

如果您仍想使用rem，请考虑使用变量释放样式表的Sass或LESS版本，以覆盖表观大小的缩放rem。

*我不想让任何人远离使用rem，但我无法正式确认每个浏览器16px默认使用。你看，有很多浏览器，对于一个浏览器而言，如果稍微偏离，比如说15px或者说它们就不会那么困难了18px。然而，在测试中，我还没有看到一个示例，其中使用默认设置的系统中使用默认设置的浏览器具有除了之外的任何值16px。如果您找到这样的例子，请与我分享。