CSS の rem布局

rem布局

rem是一个单位

类似于em，em是相对于父元素的字体大小

rem则是相对于html元素的字体大小

所以只要所有元素都使用rem单位，然后修改html的字体大小，就可以改变所有元素的大小

媒体查询（Media Query）

@media 可以针对不同的屏幕尺寸设置不同的样式

使用语法：

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

• mediatype 媒体类型

取值：

all 所有设备

print 打印机与打印预览

screen 电脑屏幕 平板 手机等

• and|not|only 关键字

将多个媒体特性连接到一起作为媒体查询的条件

and 且

not 非 可省略

only 只 可省略

• (media feature) 媒体特性 必须有小括号

取值：

width 定义可见区域的宽度

min-width 定义最小可见区域宽度

max-width 定义最大可见区域宽度

@media screen and (max-width: 800px) {
    CSS-Code;
}

上面这句话的意思就是设置 屏幕上 并且 最大宽度是800px（也就是页面的宽度小于等于800px） 时的样式

媒体查询引入资源

就是通过媒体查询实现不同条件下，使用不同的CSS文件

实现方法：

直接在里面写 media=“screen and (max-width: 800px)” （注意没有@） 就行了

相当于给加了一个条件