为你解惑：css中单位px,em,rem的区别。。。

最新推荐文章于 2022-06-03 23:46:02 发布

zhangq0123

最新推荐文章于 2022-06-03 23:46:02 发布

阅读量376

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/zhangq0123/article/details/52863004

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：所有现代浏览器下默认字体尺寸是16px，不过可以人为的把body里面定义font-size:12px;（把浏览器默认16px改小了. 即：12px）。

1. PX像素(pixel)：相对长度单位，像素PX是相对于显示器屏幕分辨率而言的。

px是你屏幕设备物理上能显示出的最小的一个点，这个点不是固定宽度的，不同设备上点的长宽、比例有可能会不同。

假设：你现在用的显示器上1px宽=1毫米，但我用的显示器1px宽=两毫米，那么你定义一个div宽度为100px，你显示器上看这个div是10厘米，我显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形，有的设备上长宽比是不一样的。

2. em：相对长度单位，相对于当前对象（父级）内文本的字体尺寸。如当前对象（父级）行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

现代浏览器下默认字体尺寸是16px，这时1em=16px。然后可以人为的把body里面定义font-size:12px(也可以是百分比，例如：62.5%即16px*62.5%=10px);（把浏览器默认16px改小了. 即：12px），此刻1em=12px，如果0.8em实际等于12px*0.8；em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。

另外：em会继承父元素的字体大小，比如：
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}
<html>
我大小为16px;
<p>
段落文字大小为12px(16*0.75);
<span>
我大小是2em，即24px，这里是相对父级字号*2的，而不是相对body里面的16px.
</span>
</p>
</html>

注释：em相对父级，元素嵌套一多，算字体就有点繁琐了，所以有了rem(浏览器支持还不是很理想。IE9+以及各种主流浏览器)。

3. rem是CSS3新增的一个相对单位. 这个单位与em的区别：在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是根节点（：root）或者html节点（默认还是16px，除非你自己再定义font-size为其他，没有了继承父级尺寸这个关系）。

rem可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是在设置的此属性前多写一个绝对单位的声明（例如：font-size：12px;）。这样，这些浏览器会忽略用rem设定的字体大小。

比如：

    html或：root {
              font-size:62.5%;      /*10 ÷ 16 × 100% = 62.5%*/
    }
    body {
             font-size:1.4rem;     /*1.4 × 10px = 14px */
    }
    h1 {
      font-size：24px；    /* 兼容不支持rem单位的浏览器 */
            font-size:2.4rem;     /*2.4 × 10px = 24px*/
    }

注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

PS：欢迎猿猿们给出自己的意见和建议！