rem的布局原理（Marksheng）

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 的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。常见的方案有以下：

• 流式布局： 点击了解流式布局

  但是目前使用流式布局的公司非常多，比如 亚马逊 、京东 、携程

  • 优点：各种屏幕都适配，都能看
  • 缺点：只有当屏幕大小和设计图相同时才能完美还原设计图，其他屏幕下都会拉伸

• 响应式布局：点击了解响应式布局及媒体查询原理

  一般多用于简单的网页和从零开始的站点。

  • 优点：一套页面可以适配多个客户端。
  • 缺点：对于复杂的网页来说工作量太大，维护性太难。

• rem布局：

  与less配合使用更加方便，目前使用rem布局的有：淘宝 、 苏宁

  • 优点：rem布局盒子适配所有的屏幕，并且可以在多个屏幕大小中完美还原设计图（等比例缩放）

rem布局适配多个屏幕

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

注意点：

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

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

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