rem+@media媒体查询rem 基础媒体查询 1.mediatype 查询类型 2.关键字 3.媒体特性媒体查询

rem 基础

rem 是一个相对单位，类似于 em，em 是相对于父元素的字体大小，rem 的基准是相对于 html 元素的字体大小

使用@media 查询，可以针对不同的媒体类型定义不同的样式

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

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

目前针对很多苹果手机、Android 手机，平板等设备都用得到多媒体查询

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

将不同的终端设备划分成不同的类型，称为媒体类型

属性值：

all用于所有设备

print用于打印机和打印预览

scree用于电脑屏幕、平板电脑、智能手机等

and可以将多个媒体特性连接到一起，相当于“且”

not排除某个媒体类型，相当于“非”，可以省略

only制定某个特定的媒体类型，可以省略

每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格

注意一定要加上小括号

属性值：

width定义输出设备展页面可见区域的宽度

min-width定义输出设备中页面最小可见区域宽度

max-width定义输出设备中页面最大可见区域宽度

@media screen and (max-width: 800px) {
  body {
    background: pink;
  }
}
/* 如果在我们的屏幕小于等于800px，则背景为粉色 */

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的stylesheets

原理就是在link中直接判断设备的尺寸，然后引用不同的css文件，建议从小到大引入

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"