10分钟回顾CSS媒体查询

在摸了几天鱼之后,领导派活了.需求是写一个响应式网站,兼容PC,Pad和手机.我一听啼笑皆非,这但是要了个人老命啊.都知道写响应式页面烦的很.无奈,既然领导要求,那就写咯.在正式开干以前,我找出之前记录的相关笔记,想要先好好复习一下.当看到媒体查询这一块的内容时,发现了一些我脑海中没有印象的知识点.因而正好趁着周末休息的时候,简单梳理一下有关媒体查询的相关知识点.等之后再想要复习的时候,看这篇文章就能够了.

今天的主角不是响应式页面怎么写,这个话题有点广,之后有时间再写好了.今天咱们就来聊一聊响应式布局中很重要的一个点:媒体查询.

媒体查询查什么?

媒体查询:media属性,能够针对不一样的媒体类型或媒体功能

媒体功能

定义不一样的样式.一般在设计响应式页面中,media属性是很是有用的.咱们能够将这个属性设置在style标签上.下面是一个媒体功能查询,其做用是查询屏幕的尺寸大小,应用不一样的样式.

<style media="(min-width: 1000px)">
  div {
    color: red;
  }
</style>
<style media="(max-width: 1000px">
  div {
    color: green;
  }
</style>
复制代码

媒体类型

再来看一个媒体类型查询

<style media="screen">
  div {
    color: red;
  }
</style>
<style media="print">
  div {
    color: green;
  }
</style>
复制代码

查询屏幕设备,其中screen 表示设备类型 一般咱们的电脑,平板,手机等都属于screen类型.其余的还有譬如print表示打印设备等(使用Ctrl+p 就能够调出来).不给值就是默认值,默认值是all.

逻辑操做符

当屏幕宽度在400到600px之间起做用,其中用到了and逻辑操做符,表示两个条件都要知足

<style media="screen and (min-width:400px) and (max-width:600px)"></style>
复制代码

当是横屏或者最大宽度为768px的时候,用 , 逗号分隔符表明或者,表示只要是横屏(定义是输出设备中的页面可见区域高度小于宽度)或者宽度小于768px就适用

<style media="screen and (orientation:landscape), screen and (max-width:768px)"></style>
复制代码

当屏幕宽度在400到600px之间不起做用.注意了,not 关键字只能用于否认整个媒体查询,而不能用于否认单个表达式,因此在使用的时候,它通常放在最开头

<style media="not screen and (min-width:400px) and (max-width:600px)"></style>
复制代码

上面讲到了and, ,(or的意思) 和not 这三种逻辑操做符,除此以外还有only等.only的意思就是只在支持媒体查询的浏览器中使用.真实场景是,在支持媒体查询的浏览器中,加不加only都是同样的,但在不支持媒体查询的浏览器中,由于它不认识only,因此会将本条媒体查询直接忽略掉.用法以下

<style media="only screen and (min-width:400px) and (max-width:600px)"></style>
复制代码

media用在啥地方?

一样 media 属性也能够用在link标签中 此时无论媒体查询是否符合,css文件都会被下载下来

<link rel="stylesheet" href="css/common.css">
<link media="(min-width:1000px)" rel="stylesheet" href="css/pc.css">
<link media="(max-width:750px)" rel="stylesheet" href="css/mobile.css">
<link media="screen" rel="stylesheet" href="css/screen.css">
<link media="print" rel="stylesheet" href="css/print.css">
复制代码

对于基于html的样式表,在经过media属性对媒体作出限制时,其用法在link和style元素中是同样的. 而在样式表中,也能够在 @import 规则上限制媒体 html页面引入一个index.css文件,其余全部的css文件都在这个index.css文件中引入,引入外部文件时的媒体查询

@import url(./common.css);
@import url(./pc.css) (min-width:1000px);
@import url(./mobile.css) (max-width:750px);
复制代码

此外还有@media块语法,也是咱们平时使用的比较多的,它容许咱们在同一个样式表中为多个媒体定义不一样的样式

.div1 {
    background-color: orange;
}
@media only screen and (min-width: 1000px) and (max-width: 1200px){
    .div1 {
        background-color: red;
    }
}
@media only screen and (min-width: 800px) and (max-width: 1000px){
    .div1 {
        background-color: green;
    }
}
@media only screen and (max-width: 800px){
    .div1 {
        background-color: blue;
    }
}
复制代码

上面的代码,在咱们不停缩放浏览器的宽度时,能够看到不一样的效果.

实现图片的自适应

有时,咱们会有这样的需求,在不一样的设备或者不一样宽度的页面中展现不一样的图片,或大小不同,或内容不同.那么要怎么作到呢?这里提供一种思路:

<picture>
    <source srcset="images/horizontal.jpg" media="(min-width: 800px)">
    <source srcset="images/vertical.jpg" media="(min-width: 600px)">
    < img src="images/default.jpg" alt="">
</picture>
复制代码

当设备宽度大于800px的时候,使用横图(horizontal.jpg),当介于600到800px之间时,使用竖图(vertical),当小于600px的时候,使用img标签中src指定的默认图(default). picture元素经过包含0个或多个source元素和一个img元素来为不一样的场景提供不一样的图片.这里咱们结合了媒体查询,实如今不一样宽度下展现不一样的图片,当没有符合条件的场景时,使用默认的图片. 更多有关picture标签的用法:戳我

使用JavaScript进行媒体查询

语法以下:

mqList = window.matchMedia(mediaQueryString)  // 参数为一个被用于媒体查询解析的字符串 返回一个新的用来媒体查询的MediaQueryList对象
复制代码

如:

const obj = window.matchMedia('(max-width:600px)')
console.log(obj)
复制代码

结果以下图:

能够经过 matches 属性来判断目前的 document 是否匹配媒体查询.此时由于个人页面宽度大于600px,因此matches属性的结果为false 此外若是咱们想要监听查询结果值的变化的话,咱们能够给这个返回对象注册监听器,添加回调函数,当改变媒体查询的状态时.触发回调.

const obj = window.matchMedia('(max-width:600px)')
console.log(obj)
const callback = e => e.matches ? console.log('greater than 600px') : console.log('less than 600px')
obj.addListener(callback)
复制代码

当浏览器的宽度从600px+到600px- 或者 从600px-到600px+ 的时候,能够看到控制台打印出了相对应的提示.固然,如果不想再继续监听,可使用 removeListener 来移除.

obj.removeListener(callback)
复制代码

总结: