css中单位px和em,rem的区别
发布网友
发布时间：2022-04-28 13:01
共2个回答
懂视网
时间：2022-04-28 17:22
一、使用em或px来设置字体的大小
CSS从排版里继承了单位pt（point）和pc（pica）。 传统打印机上使用，并优先于类似的单位cm或 in。在CSS中有理由不使用单位pt，可以使用你喜欢的任何单位。 我们一个很好的理由使用既不pt也没有任何其他绝对单位（），那就是使用em和px。
这里有几行不同的厚度。 它们中的一些或全部可能看起来很清晰，但至少1px和2px线应该清晰可见：
如果前四行看起来都相同（或者如果缺少0.5pt线），你可能正在计算机显示器上查看无法显示小于1px的点。 如果线条的厚度增加，你可能会在高质量的计算机屏幕或纸张上查看此页面。 如果1pt看起来比1.5px厚，你可能有一个手持屏幕。
CSS的神奇单位：px，通常是一个很好的单位，特别是如果样式需要文本与图像对齐，或者只是因为1px宽或1px的倍数保证看起来很清晰。
但对于字体大小，它甚至更好用em。这个想法是（1）不设置BODY元素的字体大小（用HTML格式），而是使用设备的默认大小，因为这是读者可以舒适阅读的大小; （2）表示其他元素的字体大小em：H1 {font-size: 2.5em}使H1为普通正文字体的2?倍。
在这里你可以使用的唯一的地方pt（或cm或in）用于设置字体大小是在样式表打印，如果你需要确保印刷字体是完全具有一定规模。但即使使用默认字体大小通常更好。
因为，px单位可以防止你知道设备的分辨率。 无论输出是96dpi，100dpi，220dpi还是1800dpi，它都整数px长度来表示，总是看起来很好并且在所有设备上非常相似。 但是，如果你想知道设备的分辨率，例如，知道使用0.5px线是否安全，该怎么办？ 答案是通过媒体查询检查分辨率。 解释媒体查询超出了本文的范围，但这是一个小例子：
div.mybox {
border：2px solid;
}
@media（min-resolution：2dppx）{
/ *每px有2个或更多点的介质* /
div.mybox {
border：1.5px solid;
}
}二、css的新增单位：rem
为了更容易编写仅依赖于默认字体大小的样式规则，CSS自2013年起就有了一个新的单位：rem。 rem（对于“root em”）是文档根元素的字体大小。与em元素的区别在于，rem在整个文档中是不变的。 例如，为p和h1元素提供相同的左边距，比较2013年之前的样式表：
p {margin-left：1em}
h1 {font-size：3em; margin-left：0.333em}新版本：
p {margin-left：1rem}
h1 {font-size：3em; margin-left：1rem}css还有其他一些新单位，可以指定相对于阅读器窗口的大小，这就是vw和vh。vw是窗口宽度的1/100，vh是窗口高度的1/100。还有vmin，代表vw和vh中最小的。vmax，代表vw和vh中最大的。
因为它们是如此新颖，它们还没有办法在任何地方使用。但是，截至2015年初，一些浏览器已经可以支持它们了。
总结：
热心网友
时间：2022-04-28 14:30
PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
EM:
EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。如WordPress官方主题Twenntytwelve的基准就是14px=1em。
另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，这个网站不错，输入数据就可以px和em相互计算。狠击这里：px和em换算
Rem:
EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
浏览器的兼容性
除了IE6-IE8r，其它的浏览器都支持em和rem属性，px是所有浏览器都支持。
因此为了浏览器的兼容性，可“px”和“rem”一起使用，用"px"来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。
