全面解析CSS Media媒体查询使用操作（推荐）

media="screen and (max-width:1000px)"{...}

　　上面这行代码，在老式浏览器中被解析为media="screen"，它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

　　所以，在使用媒体查询时，only最好不要忽略

方法

　　window.matchMedia()方法用来检查CSS的mediaQuery语句

　　[注意]IE9-浏览器不支持，可以使用第三方函数库matchMedia.js

属性

　　window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有media和matches两个属性

media：返回所查询的mediaQuery语句字符串
matches：返回一个布尔值，表示当前环境是否匹配查询语句
var result = window.matchMedia(‘(min-width: 600px)’);
console.log(result.media); //'(min-width: 600px)’
console.log(result.matches); // true

　　可以根据matchMedia()方法的matches属性的不同结果，进行对应的设置

var result = window.matchMedia('(min-width: 600px)');
if (result.matches) {
//
}else{
//
}

　　[注意]如果window.matchMedia无法解析mediaQuery参数，matches属性返回的总是false，而不是报错

var result = window.matchMedia('123');
console.log(result.matches);//false

事件

　　window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法

// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);

　　注意，只有mediaQuery查询结果发生变化时，才调用指定的回调函数

　　所以，如果想要mediaQuery查询未变化时，就显示相应效果，需要提前调用一次函数

　　下面这个例子是当页面宽度小于1000px时，页面背景颜色为品红色；否则为淡蓝色

var mql = window.matchMedia("(min-width: 1000px)");
mqCallback(mql);
mql.addListener(mqCallback);
function mqCallback(mql) {
if (mql.matches) {
document.body.background = 'pink';
}else{
document.body.background = 'lightblue';
}
}

打印样式

　　媒体查询的一个常用功能是打印样式的设置，主要是背景清除、字体颜色变黑等

@media print{
*,*:before,*:after{
background:transparent!important;
color:#000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,a:visited{
text-decoration: underline;
}								 
 5/6   首页 上一页 3 4 5 6 下一页 尾页