媒体查询 media query 适配布局的用法
媒体查询的作用
@media (media-feature-name: value) {
/* 符合条件时应用的样式 */
}
上面是媒体查询的基本结构，根据查看网页的设备的某些重要信息（比如屏幕大小、分辨率、颜色位深等），页面可以分别应用不同的样式甚至替换整个样式表。
如果浏览器当前的条件与圆括号中的条件匹配，它就会采用花括号中的那些样式。如果不匹配，浏览器会忽略这些样式。
注意：浏览器始终会采用位于@media代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。
为此，条件式媒体查询样式经常要覆盖其他样式，比如隐藏之前的可见元素，把区块移动位置，调整字号等。
媒体查询中最常用的媒体特性 media feature
| 特性名 | 值 | 应用场景 |
| width min-width max-width |
显示区域的宽度（对打印机而言是打印表面） | 改变布局以适应非常窄（如手机）或非常宽的显示器。 |
| height min-height max-height |
显示区域的高度 | 改变布局以适应非常长或非常短的显示器 |
| device-width min-device-width max-device-width |
当前计算机或设备屏幕的宽度 （或打印输出时纸面的宽度） |
根据不同设备（如手机）调整布局 |
| device-height min-device-height max-device-height |
屏幕或纸面的高度 | 根据不同设备（如手机）调整布局 |
| orientation | landscape（横向）或portrait（纵向） | 根据设备的朝向调整布局 |
| device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio |
显示区域的宽高比（1/1是正方形） | 根据窗口形状调整样式（问题可能比较复杂） |
| color min-color max-color |
屏幕颜色的位深 （1位表示黑白，目前主流显示器都是24位） |
检查是否支持彩色输出（比如是不是黑白打印）， 或者支持的颜色数量 |
虽然有这么多媒体特性，但目前最流行最常用的是如下几个：
- max-device-width：用于创建手机版网站
- max-width：用于针对窗口宽度设定不同的样式
- orientation：用于根据平板电脑或iPad的横向或者竖向来改变布局
媒体查询的高级条件
使用 and 关键字拼接媒体查询块
/** 正常样式 **/
@media (min-width: 600px) and (max-width: 700px) {
/** 窗口宽度在600-700像素的样式 **/
}
@media (min-width: 500px) and (max-width: 599.99px) {
/** 窗口宽度在500-600像素的样式 **/
}
@media (max-width: 499.99px) {
/** 窗口宽度小于500像素的样式 **/
}
使用 not 关键字（下面这个功能效果与上面那个一样）
/** 正常样式 **/
@media (not max-width: 600px) and (max-width: 700px) {
/** 窗口宽度在600-700像素的样式 **/
}
@media (not max-width: 500px) and (max-width: 600px) {
/** 窗口宽度在500-600像素的样式 **/
}
@media (max-width: 500px) {
/** 窗口宽度小于500像素的样式 **/
}
替换整个样式表
如果样式修改的地方很多，那么创建一个新样式表会更便于管理。创建样式表后，可以使用媒体查询创建一个样式表链接。
1）当页面宽度小于568像素时，会应用新样式并与原来已存在的样式叠加。
<head>
<link rel="stylesheet" href="hangge.css">
<link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>
（2）下面样例让几个样式完全独立，不叠加
<head>
<link rel="stylesheet" media="(min-width: 568.01px)" href="hangge.css">
<link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
</head>
但像旧版的IE不理解媒体查询就会忽略这两个样式表，所以我们需要使用条件注释引入标准样式表：
<head>
<link rel="stylesheet" media="(min-width: 568.01px)" href="hangge.css">
<link rel="stylesheet" media="(max-width: 568px)" href="hangge_small.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="hangge.css">
<![endif]-->
</head>
识别特定的移动设备
检测手机
使用 max-device-width 可以区别普通计算机和移动设备。根据经验，将 max-device-width 设置为568像素就能够涵盖目前的iPhone和Android手机（不管横向还是竖向）：
<link rel="stylesheet" media="(max-device-width: 568px)" href="hangge_mpbile.css">
注意：对于高分辨率屏幕的手机上面规则也是适用的，这是由于高分屏手机引入像素比（pixel ratio）。
以iPhone5为例，虽然它的物理像素是：640像素1136像素，但它的像素比是2（两个物理像素对应一个CSS像素）。因此其声明的CSS像素是：320像素568像素。
检测平板
对于iPad等平板，用户经常会改变方向。改变方向虽然会改变 max-width，但不会改变 max-device-width。 无论竖向还是横向，iPad始终报告自己的设备宽度为768像素。
所以我们要组合使用 max-device-width 和 orientation 属性，以便区别iPad的方向应用不同的样式：
<link rel="stylesheet"
media="(max-device-width: 768px) and (orientation: portrait)"
href="iPad_portrait.css">
<link rel="stylesheet"
media="(max-device-width: 768px) and (orientation: landscape)"
href="iPad_landscape.css">
上面规则不仅限于iPad，其他屏幕大小类似（768像素或更小）的设备也适用
更多面试题
如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。
| 面试题 | ||
|---|---|---|
| HTML | CSS | JavaScript |
| jQuery | Vue.js | React |
| 算法 | HTTP | Babel |
| BootStrap | Electron | Gulp |
| Node.js | 前端经验相关 | 前端综合 |
| Webpack | 微信小程序 | - |
这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！
