CSS中的em运用详解，1em等于多少像素

html-css022

CSS中的em运用详解，1em等于多少像素,第1张

1em并不是固定等于多少像素的，是根据元素的字体大小而定，如果是等宽字体，1em就是1个字符的宽度，如果是比例字体（只有英文字体才有）则1em等于英文大写字母“M”的宽度。操作方法如下：

1、首先新建一个html和css文档。

2、chrome默认是16px大小。

3、1em就是继承父元素不变。

4、2em这里就是32px。

5、1rem在这里也是16px，因为浏览器默认16px。

前端css中em和px都是表示长度的单位，除了这两者，CSS 还有几个不同的单位用于表示长度。而em和px的区别就在于：1.em指的是相对长度，相对单位长度指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。相对长度还有：ex、ch、rem、vw、%等等。2.px是绝对长度单位，它是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。绝对长度还有：cm、mm、in、pt等等。

px是像素点（Pixel）

em是当前元素所使用的字体的大写英文字母M的宽度，之所以指定是M，是因为在比例字体中每个字母的宽度是不相等的（比如W和i的宽度就差别很大），而在等宽字体（比如汉字）中，每个字符的宽度是相等的，所以em就是字符的宽度（或者说是汉字宽度的一半）

rem则是页面根元素的字体宽度（r就是root，根），其他解释同上

px是一个绝对长度单位，就是说指定一个元素的宽度是100px，那么它的宽就固定为100像素；而em则是一个相对长度单位，比如说一个元素的宽度是4em，而这个元素的字体宽度为12px，则这个元素的实际宽度就是48px，而如果把这个元素的字体大小改为16px，则这个元素的实际宽度也自动变为64px；至于rem，是为了让这个页面所有使用rem作为长度单位的元素都可以随页面根元素（通常是指html或body）的字体大小而自动调整，这样的话只需要改变根元素的字体大小，就可以实现改变整个页面外观的目的，通常用于响应式页面布局。