视口

什么是视口(viewport),简单的说，就是浏览器显示网页的可视区域。视口是网页的初始包含块，视口是根元素的包含块。

PC端视口：可以通过调节浏览器窗口大小来调整视口

移动端视口：视口大小无法调整，由于历史原因，不论屏幕的宽度是多少，移动端浏览器视口宽度一般会调整为980px.

什么是完美视口(ideal viewport)

定义：浏览器视口宽度与屏幕宽度一致，就成为完美视口。

我们在HTML代码中，总是能看到这样一句

<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- width=device-width 表示视口大小是设备的宽度 -->
<!-- initial-scale=1.0 表示初始的缩放比例 -->

这一句代码有什么作用呢，其实就是将浏览器视口设置为完美视口。

媒体查询

1、媒体类型

all  所有设备
screen  用于电脑屏幕，平板电脑，智能手机
print  用于打印机和打印预览
speech  用于屏幕阅读器等发声设备

2、媒体特性

width  视口宽度
max-width  最大视口宽度 表示小于等于某个值
min-width  最小视口宽度 表示大于等于某个值
device-width  屏幕宽度
max-device-width  最大屏幕宽度
min-device-width  最小屏幕宽度

注意：在设置了完美视口的移动端，width 和 device-width 最终结果没有区别。

3、运算符

and  并且
,  或者
not  非，只能用于媒体类型
ony  仅仅，只能用于媒体类型

媒体查询无法提高样式的优先级，所以建议媒体查询写在后面。

常用的媒体查询的规则

@media (max-width:480px) {/*......*/}
/* 按理来说下面应该是写小于768px这个范围的屏幕宽度，但由于上面一行媒体写的是小于480这个宽度的屏幕，768px本身就包含了480px，
这样会导致780px的媒体查询样式覆盖了480px的样式，所以要把768px写成大于480px，
这样768px就不会覆盖480px的样式了 */
@media (max-width:768px) {} 
 /* 手机横屏、平板竖屏宽度 */
@media (min-width:480px) {/*......*/}
/* 平板横屏、电脑小屏宽度 */
/* 上面说最小480往上，下面是最小768px往上，这样就可以断开区域不会重叠导致覆盖样式 */
@media (min-width:768px) {/*......*/}
/* 默认屏幕宽度 */
@media (min-width:980px) {/*......*/}
/* 大屏显示器 */
@media (min-width:1200px){/*......*/}

第二套

/* 手机 */
@media (max-width: 768px) {
    .container {
        background-color: red;
    }
}

/* 平板及以上 */
@media (min-width: 768px) {
    .container {
        background-color: green;
    }
}

/* 大屏幕 */
@media (min-width: 1440px) {
    .container {
        background-color: blue;
    }
}