移动端布局 px，em，rem

最新推荐文章于 2023-06-02 11:01:00 发布

陌上烟雨寒

最新推荐文章于 2023-06-02 11:01:00 发布

阅读量337

点赞数

分类专栏： css 文章标签： html5 html css css3

本文链接：https://blog.csdn.net/weixin_47180815/article/details/106605519

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

PX

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

EM

em 是基于基数（比如：1.5em）来计算出来的相对字体大小。

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

EM特点

em的值并不是固定的；
em会继承父级元素的字体大小。
当父元素的基数改变时，em的大小也会发生改变

代码：

    <style>
        .box {
            font-size: 12px;
        }
    </style>
<body>
    <h1>你好</h1>
    <div class="box">
        <h1>你好</h1>
    </div>
</body>

运行结果：
解释：

因为h1默认的大小是2rem
普通情况下rem的计算1rem=16px
当父元素的基数改变时，em的大小也会发生改变，在上面的例子中div的font-size：12px，所以计算得到的h1字体大小为 2*12px=24px

rem是什么?

rem (font size of the root element)是指相对于根元素（html）的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
代码：

    <style>
        @media screen and (min-width:1200px) {
            html {
                font-size: 48px;
            }
        }

        @media screen and (min-width:800px) and (max-width:1200px) {
            html {
                font-size: 36px;
            }
        }

        @media screen and (max-width:800px) {
            html {
                font-size: 24px;
            }
        }

        input {
            width: 3rem;
            height: 2rem;
            font-size: 1rem;
            border: 1px solid #000;
        }
    </style>
<body>
    <input type="submit">
</body>