其实学校自学前端的时候都不知道媒体查询，在实际工作中慢慢接触到了。最近做的项目中，碰到了前端当中很多人都会碰到的问题，不同浏览器的类型以及不同版本的浏览器的兼容性。其实在各大主流浏览器更新最新版本或者是接近最新版本的时候，网页页面显示的内容都不会太大，是因为他们都支持htm5和css3。
使用@media查询，可以针对不用的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式，特别是要响应式web设计
@media浏览器的支持情况
以前我学css的时候，从来不关注样式对于浏览器的支持情况，现在接触过响应式，不能不关注
@ media的写法
在<style></style>里面@media mediatype (常用的媒体类型是screen,用于电脑屏幕,平板电脑,手机等) and|not|only(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定义输出设备中的页面可见区域宽度。
——————————————————————————我是分割线
通常我们看到的css3媒体查询的写法是这样的
@media screen and (max-device-width:960px){
background:red;
}
媒体功能虽然很多，但是很好理解
上述的代码表示的是小于960px的设备的背景色显示红色
css2 媒体查询的写法
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
就是在head标签中插入以上的的一段代码
<link rel="stylesheet" type="text/css" media="screen and(max-width:960px)" href="stylesheet">
上面用css2改写css3代码
另外还要记得还要走几步
1、<meta name="viewport" content="width=device-width,initial-scale=1.0,maximun-scale=1.0">，这根禁止响应式相反
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
2、因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if it IE 9]-->
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.min.js"></script>
<!--[endif]-->
另补：
1.如果要想样式兼容各种浏览器，五大主流浏览器，谷歌、火狐、欧朋、safra，他们的内核不一样，presto（火狐）、gecko（opear前内核，现在已改为Google Chrome的Blink内核）、trident（IE）、webkit（Safari内核,Chrome内核原型,开源)、Blink。基于webkit内核的在样式前面加上-webkit-，基于gecko在前面加上-o-,基于presto在前面加上-moz-
2、如果想兼容不同屏幕尺寸的，需要用媒体查询或者用响应式框架，如bootstarp或者移动端的zepto.js等
3、如果想兼容ie8以下的版本，需要引入
response.js和html5shiv.js文件,因为ie8不兼容html5也不支持css3的Media
如有错误，请指出，互相交流，共同进步！
网友评论