rem的布局原理（Marksheng）

待我称王封你为后i 2023-01-02 06:26 133阅读 0赞

## em和rem的认识 ##

> 在布局中，除了px之外，还有两个常见的单位，em和rem

**em：** 相对于当前元素的字体大小→ `1em = 当前标签的font-size`

**rem：** 相对于根元素（html）的字体大小→ `1rem = html标签的font-size`

> 浏览器默认的font-size的大小为16px

**rem布局的效果：**

*  屏幕越大，标签就越大
 *  屏幕越小，标签就越小

### **rem布局的原理：** ###

> 通过媒体查询的方式动态改变html标签的font-size的大小

*  当屏幕越大，让html标签的font-size变大即可
 *  当屏幕越小，让html标签的font-size变小即可

### 为什么要用rem布局 ###

**现状：**

由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的`320px 360px 375px 384px 480px 640px`等。在开发中，UI一般只会提供 `750px` 或者是 `640px` 的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。常见的方案有以下：

*  **流式布局：** [点击了解流式布局][Link 1]
    
    > 但是目前使用流式布局的公司非常多，比如 [亚马逊][Link 2] 、[京东][Link 3] 、[携程][Link 4]
    
     *  优点：各种屏幕都适配，都能看
     *  缺点：只有当屏幕大小和设计图相同时才能完美还原设计图，其他屏幕下都会拉伸
 *  **响应式布局：**[点击了解响应式布局及媒体查询原理][Link 5]
    
    > 一般多用于简单的网页和从零开始的站点。
    
     *  优点：一套页面可以适配多个客户端。
     *  缺点：对于复杂的网页来说工作量太大，维护性太难。
 *  **rem布局：**
    
    > 与less配合使用更加方便，目前使用rem布局的有：[淘宝][Link 6] 、 [苏宁][Link 7]
    
     *  优点：rem布局盒子适配所有的屏幕，并且可以在多个屏幕大小中完美还原设计图（等比例缩放）

### rem布局适配多个屏幕 ###

> rem布局适配的原理说白了，就是根据屏幕的大小，动态的改变html标签的font-size的大小，此时就可以配合媒体查询做到不同屏幕的适配

**注意点：**

因为要求页面是**等比例缩放**的，所以：

`设计图的屏幕宽度/给设计图设置的font-size = 你需要适配的屏幕宽度/你需要适配屏幕的fong-size`

> 保证屏幕宽度与html标签font-size的比例相同，就可以轻松适配多个屏幕

![rem适配比例关系][rem]

[Link 1]: https://blog.csdn.net/weixin_45674894/article/details/102531078
[Link 2]: https://www.amazon.cn/
[Link 3]: https://m.jd.com/
[Link 4]: https://m.ctrip.com/
[Link 5]: https://blog.csdn.net/weixin_45674894/article/details/102635770
[Link 6]: https://m.taobao.com/
[Link 7]: https://m.suning.com/
[rem]: /images/20221120/e53b2bc05c244b9980704e49bf6427aa.png