CSS3媒体查询

CSS3媒体查询

响应式布局
1.什么是响应式布局
一个网站可以适应多个终端,而不是为每一个终端去开发一个版本

2.@media （媒体查询）

2.1 语法**

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

2.2 语法结构

• 媒体类型（mediaType ）

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。（最常用）
speech	应用于屏幕阅读器等发声设备

• 媒体功能（media feature）

值	描述
max-width	定义输出设备中的页面最大可见区域宽度
min-width	定义输出设备中的页面最小可见区域宽度

• 屏幕尺寸（screen）

类型	值
手机	(<768px)
平板	(≥768px)
桌面显示器	(≥992px)
大屏显示器	(≥1200px)

媒体属性

媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符

[注意]媒体属性必须用括号()包起来，否则无效

下表中列出了所有的媒体属性

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
aspect-ratio | min-aspect-ratio | max-aspect-ratio
device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
color | min-color | max-color
color-index | min-color-index | max-color-index
monochrome | min-monochrome | max-monochrome
resolution | min-resolution | max-resolution
scan | grid

CSS3 media 媒体查询的写法：

media媒体查询所有参数汇总：

媒体查询器中还包含并不常用的相关功能，悉如示下：

• width:浏览器可视宽度，

• height:浏览器可视高度，

• device-width:设备屏幕的宽度，

• device-height:设备屏幕的高度，

• orientation:检测设备目前处于横向还是纵向状态，

• aspect-ratio:检测浏览器可视宽度和高度的比例(例如：aspect-ratio:16/9)，

• device-aspect-ratio:检测设备的宽度和高度的比例，

• color:检测颜色的位数（例如：min-color:32就会检测设备是否拥有32位颜色），

• color-index:检查设备颜色索引表中的颜色（他的值不能是负数），

• monochrome:检测单色楨缓冲区域中的每个像素的位数（这个太高级，估计咱很少会用的到），

• resolution:检测屏幕或打印机的分辨率(例如：min-resolution:300dpi或min-resolution:118dpcm)，

• grid：检测输出的设备是网格的还是位图设备。

4.总结
在实际开发中，通常需要设置响应式网页宽度的最大值，一旦忽略最大宽度，臃肿或零散的网页布局都会造成视觉洪灾，也就是我们常说的看起来很low。
另外谈谈目前显示设备中的网页宽度问题（由于篇幅问题，就不从工业革命开始扯了），目前最为常见的宽度基本上都是：大于或等于960px的PC端（1920px、1600px、1440px、1280px、1140px、960px）、960px至640px之间的平板端（768px、640px）以及640px以下的手机端（480px、320px），以上宽度存在已久，且显示设备中的网页宽度会长期处于这样的状态下，在响应式网页宽度设计上，基本从这几个尺寸考虑就已经足够。
千万不要忘记设置meta标签，如果忘了写，浏览器是不识别媒体查询代码的；
媒体查询采用流式布局，站手机端的100%；
pc端网页能不给元素设定固定宽高就不要设，这样易于维护；