响应式布局

媒体查询（响应式布局的方法之一，扩展了 Media 属性）

1. 首先在使用 Media 属性的时候需添加兼容移动设备优先代码

<meta name=”viewport”content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=”no”>
/*参数说明：
- width=device-width：宽度等于当前设备宽度
- Initial-scale：初始缩放比列（默认 1.0）
- maximum-scale：允许用户缩放最大比列（默认 1.0）
- user-scalable：是否允许手动缩放（默认为 no）
*/

2. <style>里执行媒体查询

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

参数说明：

• mediatype：在w3c标准中，只有all、print、screen、speech（应用于屏幕阅读器等发声设备）这四个媒体类型仍能>使用
• media feature：
• aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
• color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于 0
• color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于 0
• device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
• device-height 定义输出设备的屏幕可见高度。
• device-width 定义输出设备的屏幕可见宽度。
• grid 用来查询输出设备是否使用栅格或点阵。
• height 定义输出设备中的页面可见区域高度。
• max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
• max-color 定义输出设备每一组彩色原件的最大个数。
• max-color-index 定义在输出设备的彩色查询表中的最大条目数。
• max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
• max-device-height 定义输出设备的屏幕可见的最大高度。
• max-device-width 定义输出设备的屏幕最大可见宽度。
• max-height 定义输出设备中的页面最大可见区域高度。
• max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
• max-resolution 定义设备的最大分辨率。
• max-width 定义输出设备中的页面最大可见区域宽度。
• min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
• min-color 定义输出设备每一组彩色原件的最小个数。
• min-color-index 定义在输出设备的彩色查询表中的最小条目数。
• min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
• min-device-width 定义输出设备的屏幕最小可见宽度。
• min-device-height 定义输出设备的屏幕的最小可见高度。
• min-height 定义输出设备中的页面最小可见区域高度。
• min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
• min-resolution 定义设备的最小分辨率。
• min-width 定义输出设备中的页面最小可见区域宽度。
• monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于 0
• orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
• resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
• scan 定义电视类设备的扫描工序。
• width 定义输出设备中的页面可见区域宽度。
  注意：如果想在一个语句中定义多个条件时，可以使用and连接，and后面有个空格别忘了
  示例：@media screen and (min-width: 960px,max-width: 1200px){}