媒体查询

视口 viewport

① 什么是视口

1. 视口是浏览器的可视区域
2. 视口是根元素的包含块

② 移动端视口和PC端视口

PC端视口： 视口宽度默认等于屏幕宽度，不会进行缩放
移动端视口： 默认会进行缩放，视口宽度会缩放为980px

③ 完美视口设置

什么是完美视口：

视口宽度等于屏幕宽度不进行缩放就是完美视口！

如何设置为完美视口：

PC端浏览器视口默认就是完美视口
移动端浏览器可以在网页中设置meta元信息实现完美视口

<meta name="viewport" contnet="width=device-width,initical-scale=1.0">

媒体查询基本语法

媒体查询的权重仅仅看 选择器的权重，然后还有媒体查询的位置，后边覆盖前边的。

① 媒体类型

all
screen
print
speech

@media screen {
     h1 {
         text-align: center;
     }

     body {
         background: #099;
     }
}

② 媒体特性

width			视口宽度
max-width		最大视口宽度
min-width		最小视口宽度

device-width		屏幕宽度
max-device-width	最大屏幕宽度 设备屏幕物理像素
min-device-width	最小屏幕宽度

@media (device-width:800px) {
      body {
          background: #900;
      }
}

③ 运算符

only		仅仅，用于媒体特性
not			否定，用于媒体特性
and			并且
,			或者

@media (min-width:600px) and (max-width:800px) {
     body {
         background: #900;
     }
}

@media (max-width:400px),(min-width:1000px) {
    body {
        background: #009;
    }
}

媒体查询在 CSS 中使用

① 第一种使用方式： 媒体查询与CSS代码写在一起(推荐使用)

body {
    margin: 0;
    background: #333;
}

h1 {
    text-align: center;
    font-size: 4em;
    color: #fff;
}

/* 视口宽度大于等于 1000px */
@media (min-width: 1000px) {
    body {
        background: #090;
    }
}

@media (min-width: 1000px) {
    h1 {
        text-decoration: wavy underline;
    }
}

② 第二种使用方式: link 标签的 media 属性 (不推荐)

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="min1000.css" media="(min-width:1000px)">