网页开发的尺寸单位 px，百分比，em，rem

最新推荐文章于 2025-03-26 00:15:00 发布

如梦灬初醒

最新推荐文章于 2025-03-26 00:15:00 发布

阅读量2.9k

点赞数 2

本文链接：https://blog.youkuaiyun.com/TXW6666/article/details/109604556

版权

网页开发的尺寸单位

平时写pc端页面时，一般是px作为单位，遇到一些比较复杂的需要定位的也会夹杂使用百分比;但是在移动端时候px很容易布局就会乱，如果使用的是相对单位比如 em，rem
下面就说他们之间的区别

单位与区别：

px：像素，相对于屏幕分辨率而言的，简单来说就是平时我们写静态页面时用px作单位，但是在firefox/chrome会发现我们的布局发生了变化；
百分比：这比较适合块状的页面设计，但是他相对于不同屏幕而言的，比如经常在写移动端的时候也会用到
em：是相对长度单位，相对于父级元素的单位。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。就是当默认字体大小为14px，那么就有1em=14px；
rem：是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。

移动端单位rem和em

rem与em都是相对单位，我们使用它们的目的就是为了适应各种手机屏幕。
rem是根据html根节点来计算的，而em是继承父元素的字体。比如下面一个demo

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Test REM</title>
    <style>
        html {
            font-size: 40px;
        }
        
        body {
            font-size: 20px;
        }
        
        .em,
        .rem {
            font-size: 14px;
        }
        
        .em span {
            font-size: 1em;
        }
        
        .rem span {
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <div class="em">
        <span>font-size使用em</span>
    </div>
    <div class="rem">
        <span>font-size使用rem</span>
    </div>
</body>

</html>

在这里插入图片描述
从效果图上明显的可以看出连个span标签中的文本大小不一样:
第一个span继承了它的父元素div的大小，所以是14px,第二个span是通过html来计算的，所以是40px;

通过这个简单的例子我们得知上面的结论是正确的。所以我们可以通过下面这种比例来对不同的手机屏幕做适配。

rem和em与px的换算

px/rem = 基值(em指的是自己元素上的font-size的值，rem指的是html中font-size的值）

px	rem	基数
8px	0.5rem	16px
10px	0.625rem	16px
12px	0.75rem	16px
13px	0.8125rem	16px
14px	0.875rem	16px
16px	1rem	16px

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Test REM</title>
    <style>
        html {
            font-size: 16px;
        }
        
        .rem span {
            font-size: 0.5rem;
        }
    </style>
</head>

<body>
    <div class="rem">
        <span>font-size使用em</span>
    </div>

</body>

在这里插入图片描述