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的比例相同，就可以轻松适配多个屏幕
心已赠人
淩亂°似流年
我就是我
还没有评论，来说两句吧...