八、rem适配布局
rem适配布局
思考：
1、页面布局文字能否随着屏幕大小变化而变化？
2、流式布局和flex布局主要针对于宽度布局，那高度如何设置？
3、怎么让屏幕发生变化的时候元素高度和宽度等比例缩放？
1.1 rem单位
rem(root em) 是一个相对单位，类似于em，em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如，根元素（html）设置font-size=12px;非根元素设置width:2rem，则转换成px表示就是24px。
rem与em类似，rem相对与根元素（html）字体大小，em是相对于父元素字体的大小。
使用rem的好处：rem受根元素html字体大小的控制，当根元素html的字体变大或变小，rem也会变化，那么整体的布局就会变化，因为使用的是rem布局，也就是盒子大小使用的是rem。
1.2 媒体查询
媒体查询是css3新语法。
使用@media查询，可以针对不同的媒体类型定义不同的样式。
@media可以针对不同的屏幕尺寸设置不同的样式。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
目前针对很多苹果手机、安卓手机，平板等设备都用得到媒体查询。
用@media开头注意@符号
mediatype 媒体类型
关键字and not only
media feature 媒体特性 必须有小括号包含。
媒体查询可以根据不同尺寸的屏幕修改根元素html的字体大小，从而改变整体用rem的盒子的大小，从而改变整体布局的大小。
1.2.1 mediatype查询类型
将不同的终端设备划分成不同的类型，称为媒体类型。
1.2.2 关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。
and：可以将多个媒体特性连接起来，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。
1.2.3 媒体特性
每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。
注意他们要加小括号包含。
例如：
1.3 媒体查询+rem实现元素动态大小变化
rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式。
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化。
京东的导航就用到可rem，m.jd.com
苏宁也用了 m.suning.com
1.4 媒体查询引入资源（理解）
当样式比较多的时候，我们可以针对不同的媒体使用不同stylesheets(样式表)。
原理，就是直接在link中判断设备屏幕的尺寸，然后引用不同的css文件。
利用媒体查询引入不同屏幕尺寸的css文件。
例如：
