媒体查询

参考链接 https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio

媒体查询

目的是为了页面能够在不同的显示器 ，不同大小的屏幕下也能够 正常显示

原理：定义一系列的条件，用这些条件去检查显示器设备，如果符合规定的条件就应用对应的css样式。

媒体类型：

screen         计算机屏幕（默认值）    
tty            电传打字机以及使用等宽字符网格的类似媒介
tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）
projection     放映机
handheld       手持设备（小屏幕、有限的带宽）
print          打印预览模式 / 打印页
braille        盲人用点字法反馈设备
aural          语音合成器
all            适合所有设备

 

一般情况下我们都用all或者screen就可以了

媒体属性

  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

orientation：portrait | landscape  屏幕方向

 

逻辑操作符

　　操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

常用写法  @media + 媒体类型 + 逻辑操作符 +（媒体属性） + 逻辑操作符 + （媒体属性）{

css代码

}

以@media 开头 声明这是一个媒体查询，媒体类型如果没写默认为all，

@media screen and (min-width:960px) and(max-width:1200px){
　　body{

　　　　background:yellow;

　　}
}

当屏幕的宽度大于等于960px并且小于等于1200px时，body的样式会被应用

实际上我们也可以用js直接检屏幕的宽高，然后直接操纵styleSheets来办到样式表的动态引入，但性能肯定不如媒体查询

相关方法

方法

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

 

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

var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true

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

 

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

注意，只有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';
  }
}

 

总结：

媒体查询固然可以解决屏幕适配的问题，但实际业务中运用得很少，因为一套页面做两套css版本同时修改的时候还要兼顾两套使得开发和维护成本变高，大屏和小屏不仅仅是显示的变化，更多的是交互方式的变化，鼠标与触摸的变化，不如写mobile，pc写两套，还是建议少用，除非真有用flex大法都解决不了的才去用。