px em rem

最新推荐文章于 2023-11-10 12:15:42 发布

小强Sir

最新推荐文章于 2023-11-10 12:15:42 发布

阅读量201

点赞数

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_36707807/article/details/79205156

版权

学习笔记专栏收录该内容

2 篇文章

订阅专栏

px em rem区别

之前面试有遇到过这个问题，不够当时没说出来，好丢脸的感觉，做了将近两年的前端开发，基本的单位都没搞清楚，虽然在上家公司统一使用的px，但是作为一个程序员，就该有探索精神不是【手动狗头】。

px

这个叫“像素”，这个单位在十年前可能很多人都不知道，不过现在科技这么发达，应该没有哪个年轻人不知道了。我就是个小前端，知识面有限，这个笔记我就记下关于css方面的东西，其他的就算了。
px只是一个相对单位，1px的长度在不同的显示器上可能显示的长度是不同的，绝大部分时候其实我还不需要关心1px的物理长度这种事，因为我们的项目没有这种变态需求。
感觉说了一堆废话，总之这就是一个基于屏幕分辨率的相对单位，在不同显示器上效果可能会不同。

em

emmm!~这个东西也是个相对单位，它是基于父级元素尺寸计算的，如果父元素的字体大小是16px，那么他的子元素字体的1em的大小就等于16px。

#html
    <div class="div">
        <p class="px">我叫杲新建</p>
        <p class="em">我才是杲新建</p>
    </div>

#css
    .div{font-size: 16px;}
    .em{font-size: 1em;}

效果是这样的
这里写图片描述

是不是一样大，这时候 1em = 16px；
em单位就是相对于父级元素设定，比如我们看下面这个示例

#html
    <div class="div">
        <p class="px">我叫杲新建</p>
        <p class="em">
            我才是杲新建 
            <br />
            <span class="grandsun">这是孙子</span>
        </p>
    </div>

#css
    .div{font-size: 16px;}
    .em{font-size: 2em;}
    .grandsun{font-size: 1em;}

效果就是这样
相对于父级元素
外层div字体大小是16px，子元素em的字体大小是.div的两倍，就是32px，而.grandsun的字体大小是其父元素.em的一倍，所以也是32px。
从这可以看出虽然一个是2em，一个是1em，但是两个元素的字体是一样大的。

rem

我们在在看最后一个rem。
这个跟em很像，是css3新增的，root em（相对于根的em），它也是相对大小，不过不是相对于父级元素，而是相对于根元素。我们来看下面的示例

#html
    <body>
        <div class="div">
            <p class="px">我叫杲新建</p>
            <p class="em">
                我才是杲新建
                <br/>
                <span class="grandson">这是孙子</span>
            </p>
        </div>
    </body>

#css
    body{16px;}
    .px{font-size: 1rem;}
    .em{font-size: 2rem;}
    .grandson{font-size: 1rem;}