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 * 2=30px。为什么要这样写呢？因为我们移动端页面跟pc页面不一样的地方是，当我们缩放页面大小的时候，为了适应不同屏幕大小依旧能够看清楚页面的内容，我们就需要rem来布局能够跟着页面而对字体缩放。

3.我们应该怎么设置字体根据不同得大小，去显示字体不同得大小呢？

上面的例子虽然设置了相对页面的字体大小，但是整个页面大小确实固定的，但如何实现页面自适应，根据页面的整体变化，字体相对页面变化，这时就需要用到rem布局中的：媒体查询

3.媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询中可用于检测的媒体特性有 width 、 height 和 color 等等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

4.媒体查询的使用

语法格式如下：

 /* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
        /* 2. 小于540px 页面的背景颜色变为蓝色 */
        
        @media screen and (max-width: 539px) {
            body {
                font-size: 75px;
                background-color: blue;
            }
        }
        /* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
        /* @media screen and (min-width: 540px) and (max-width: 969px) {
            body {
                font-size: 80px;
                background-color: green;
            }
        } */
        
        @media screen and (min-width: 540px) {
            body {
                font-size: 85px;
                background-color: green;
            }
        }
        /* 4. 大于等于970 我们页面的颜色改为 红色 */
        
        @media screen and (min-width: 970px) {
            body {
                font-size: 90px;
                background-color: red;
            }
        }
        /* 5. screen 还有 and 必须带上不能省略的 */
        /* 6. 我们的数字后面必须跟单位  970px   这个 px 不能省略的 */

媒体类型有四种，all代表所有的媒体设备；print 用于打印机；screen 用于电脑屏幕、平板、手机等（这也是我们通常选择的媒体类型）；speech 用于屏幕阅读器。

逻辑运算符：这个我们应该不陌生。分为三种：and、or、not。

媒体特征:书写格式与css样式类似，都是属性名：属性值（例如min-width：200px）