rem适配布局

思考？

1. 页面布局文字能否随着屏幕大小变化而变化？
2. 流式布局和flex布局主要针对与宽度布局，那高度如何设置？
3. 怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？
   这时就需要用到rem适配布局。

rem 单位

rem(root em)是一个相对单位，类似于em,em是相对于父元素的字体大小。
而rem的基准是相对于html元素的字体大小。
比如，html设置font-size = 12px; 非根元素设置width:2rem;则换算成px就是24px。
rem单位是跟着html走的，媒体查询可以根据不同设备宽度来修改样式，所以媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的的动态变化

媒体查询（CSS3新语法）

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同屏幕尺寸设置不同的样式
• 当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询

语法

@media mediatype and|not|only (media feature) { CSS-CODE; }

mediatype

all / print / screen     所有设备 / 打印机和打印预览 / 电脑屏幕、平板电脑，智能手机等

媒体特性

width / max-width / min-width
示例：
@media screen and (max-width: 800px) { body { ..... } }

引入资源

不同设备引入不同的CSS文件资源   文件名可以设置为style640..style1500..style1920...
媒体查询最好的方法是从小到大。

语法

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 640px)">