参考链接 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大法都解决不了的才去用。