rem布局的原理

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

rem是什么？怎么用？

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

举例：

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

html{
    font-size:15px;
} 
    div {font-size:1.5rem;}
      
    p {font-size:2rem;}

<div>div</div>
<p>p</p>

设置字体根据可视区域，改变显示字体大小

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

媒体查询

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

4.媒体查询的使用

语法格式如下：

 /* 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 小于540px 页面的背景颜色变为红色 */
​
@media screen and (max-width: 539px) {
    body {
        font-size: 75px;
        background: #f00;
    }
}
/* 540 ~ 970 我们的页面颜色改为蓝色 */
@media screen and (min-width: 540px) and (max-width: 969px) {
    body {
        font-size: 80px;
        background: #0f0;
    }
}

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

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

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