前端面试之CSS单位中px、em和rem的区别

最新推荐文章于 2024-05-06 10:59:29 发布

KLafairy

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量484

点赞数 1

文章标签：前端 css 面试

本文链接：https://blog.csdn.net/qq_60919669/article/details/124594936

版权

从这篇博客开始，又再次总结一些面试中经常被问到的题目，用精炼的语言去回答面试官的问题，力求做到有的放矢却又表面滴水不漏。

考察点：单位的使用，重点在于rem适配

首先，简单回答一下这三者是什么：

px: 绝对单位；

em: 相对单位，相对于父盒子的font-size;

rem: 相对单位，相对于html根标签

其次，既然是问区别，要稍微说一下三者区别：

IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是html根元素。

然后自然而然把重点放到rem这个单位上来，rem既可以做到只修改根元素的就成比例调整初始所以字体大小，又可以避免字体大小逐层复合的连锁反应，目前除了IE8以下的版本外，所有的浏览器都支持rem。（你可说可不说）

你要展示的是这部分：

rem一般可以用于rem适配，其适配原理是：

使用rem作为单位（涉及单位转换问题，利用webpack插件，让px自动转换为rem）
动态的设置不同屏幕下的html的font-size，一般可以分为360、840、1440屏宽，可以用媒体查询、js插件flexible.js的方法来设置。

<style>
    .father {
        width: 400px;
        height: 400px;
        background: green;
        margin-bottom: 10px;
        font-size: 30px;
    }
    
    .box1,
    .box2,
    .box3 {
        width: 100%;
        height: 150px;
        background-color: skyblue;
    }
    
    .box1 {
        font-size: 40px;
    }
    
    .box2 {
        font-size: 2em;
    }
    
    .box3 {
        font-size: 3rem;
    }
</style>

<body>
    <div class="father">
        <div class="box1">1223</div>
    </div>
    <div class="father">
        <div class="box2">2344</div>
    </div>
    <div class="father">
        <div class="box3">3445</div>
    </div>
</body>

加粗的黑体字是一定要答到的点，然后适配原理的方法也要讲，讲清楚重点就行。

KLafairy

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端面试之CSS单位中px、em和rem的区别

从这篇博客开始，又再次总结一些面试中经常被问到的题目，用精炼的语言去回答面试官的问题，力求做到有的放矢却又表面滴水不漏。考察点：单位的使用，重点在于rem适配首先，简单回答一下这三者是什么：px: 绝对单位；em: 相对单位，相对于父盒子的font-size;rem: 相对单位，相对于html根标签其次，既然是问区别，要稍微说一下三者区别：IE无法调整那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是html根元素。然后自然而然把重点放到rem这个单位.
复制链接

扫一扫