px、em与rem之间如何选择

最新推荐文章于 2022-10-09 08:43:46 发布

豆子前端

最新推荐文章于 2022-10-09 08:43:46 发布

阅读量330

点赞数

分类专栏：前端文章标签： html 定位 css html5 css3

本文链接：https://blog.csdn.net/qq_41996454/article/details/109010839

版权

前端专栏收录该内容

177 篇文章 11 订阅

订阅专栏

文章目录

px
- 特点
em
rem
- 注意
- 例子
px 与 rem 的选择？

px

px像素（Pixel）。相对长度单位。

像素px是相对于显示器屏幕分辨率而言的。

特点

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

em

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

特点

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

注意

任意浏览器的默认字体高都是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。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            font-size: 40px;
            width: 7.5em;   /* 300px */
            height: 7.5em;
            border: solid 2px black;
        }

        p {
            font-size: 0.5em; /* 20px */
            width: 7.5em;  /* 150px */
            height: 7.5em;
            border: solid 2px blue;
            color: blue;
        }

        span {
            font-size: 0.5em;   /* 10px */
            width: 7em;         /* 70px */
            height: 6em;        /* 60px */
            border: solid 1px red;
            display: block;
            color: red;
        }
    </style>
</head>
<body>
<div>
    父元素div
    <p>
        子元素p
        <span>孙子元素span</span>
    </p>
</div>
</body>
</html>

rem

rem是CSS3新增的一个相对单位（root em，根em）。

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

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

p {font-size:14px; font-size:.875rem;}

注意

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

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        html {
            font-size: 10px;
        }

        div {
            font-size: 4rem; /* 40px */
            width: 20rem; /* 200px */
            height: 20rem;
            border: solid 2px black;
        }

        p {
            font-size: 2rem; /* 20px */
            width: 10rem;
            height: 10rem;
            border: solid 1px blue;
            color: blue;
        }

        span {
            font-size: 1.5rem;
            width: 7rem;
            height: 6rem;
            border: solid 2px red;
            display: block;
            color: red;
        }
    </style>
</head>
<body>
<div>
    父元素div
    <p>
        子元素p
        <span>孙子元素span</span>
    </p>
</div>
</body>
</html>

px 与 rem 的选择？

在做项目的时候用什么单位长度取决于需求。

像素（px）：用于元素的边框或定位。对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。
em/rem：响应式页面，对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
- em不同元素的参照物不一样（都是该元素父元素）
- rem就只有一个参照物（html元素）
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem -改用 %。
不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。