HTMLrem实现布局的原理

上节课我们已经学习了flex布局方式了，这节课我们学习一下WAP端新的布局方式--rem布局

1.rem布局的原理

通过媒体查询的方式动态改变html标签的font-size的大小当屏幕越大,让html标签的font-size变大即可当屏幕越小,让html标签的font-size变小即可。

2.rem是什么?怎么用?

rem是一个单位。相对长度单位，相对于根元素(即html元素)font-size计算值的倍数。

举例：

如下，我们有两个元素div和span，我们将HTML整体的字体设置为15px，其中div是HTML的1.5倍书写成1.5rem，即15*1.5=22.5px。span的字体大小是HTML的2倍，即15*12=30px。为什么要这样写呢?因为我们wap端页面跟pc页面不一样的地方是，当我们缩放页面大小的时候，为了适应不同屏幕大小依旧能够看清楚页面的内容，我们就需要rem来布局能够跟着页面而对字体缩放。

3.怎么样设置页面字体根据不同的大小，字体显示不同的大小呢?

上面的例子虽然设置了相对页面的字体大小，但是整个页面大小确实固定的，如何实现页面自适应，根据页面的整体变化，字体相对页面变化，不就实现了我们想要的效果吗?这就需要用到rem布局中的另外一个知识点：媒体查询。接下来我们具体讲讲媒体查询的使用。