深究--CSS中px、rem与em的区别_css中px,em,rem之间的区别-CSDN博客

本文链接：https://blog.csdn.net/qq_45096273/article/details/111467569

前言:随着PC端的网页盛行,移动端作为重要的一部分,也是火热的发展,但是鉴于一些单位的使用,我们并不知道该怎样去使用,那么今天我们来看看常用的三种单位PX、rem与em。

一.PX

1.概念:

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX:px是pixel的缩写，是像素单位也是为影像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“画像元素”之意，有时亦被称为pel（picture element）。

像素:像素是指在由一个数字序列表示的图像中的一个最小单位，称为像素。像素是分辨率的单位，分辨率越高,那么显示效果就越精细和细腻。相机所说的像素，其实是最大像素的意思，这个像素值仅仅是相机所支持的有效最大分辨率。

.box{
	width:200px;
	height:200px;
}

2.特点:

IE无法调整那些使用px作为单位的字体大小；
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

二.em

em 和 rem 都是灵活可扩展的单位，由浏览器转换为像素值，取决于设计中的字体大小，如果使用值 1em 或 1rem ，它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ，那么 1px 始终显示为完全 1px。

1.概念:

em:em是相对长度单位。其相对于当前对象内文本的font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。

2.特点:

em的值并不是固定的；
em会继承父级元素的字体大小。

3.注意:

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意几点：

body选择器中声明Font-size=62.5%；
将你的原来的px数值除以10，然后换上em作为单位；
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

4.为什么使用em:

em 单位取决于一个font-size值而非 html 元素的字体大小。

为此，em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性

例如，您可能使用em 值设置导航菜单项的padding、 margin，line-height等值。带有0.9rem 字体大小的菜单

通过这种方式，如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。

   body {
            font-size: 62.5%;
        }
        
   .box {
       font-size: 1.4em;
   }

5.重点理解:

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。事实上，根据W3标准，它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。

三.rem

1.概念:

rem:是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区

别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个

单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大

小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对

于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字

体大小。

 html {
        font-size: 42.66px !important;
    }
  .box{
  	 font-size: .25rem;  ||    font-size: 20px;
  }

2.特点:

根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是

直接确定 rem 值，但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem

单元以及每个通过 em 单位继承的值。

3.为什么使用rem:

Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。相反，它给我们的一个途经去获取用

户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。为此，使用 rem 单位的主要

目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。

四.总结

1.rem与em:

rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

em 单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

2.px与rem:

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

3.综述:

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem 改用 %。
不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。