css3的mediaQuery

作用

在不同的设备上使用不同的css

mediaQuery写法

直接写在css中

语法格式:

@media 媒体类型 and/not (媒体条件) [and/or (媒体条件)]...

bootstrap4 就将屏幕划分为超小屏幕, 小屏幕，中等屏幕，大屏幕，超大屏幕5类

• 超小屏幕: 屏幕分辨率<576px
• 小屏幕: 屏幕分辨率≥576px
• 中等屏幕: 屏幕分辨率≥768px
• 大屏幕: 屏幕分辨率≥992px
• 特大屏幕: 屏幕分辨率≥1200px

bootstrap5在特大屏幕之后还划分了一个超级大屏幕

• 超级大屏幕: 屏幕分辨率≥1400px

// 超小屏幕
@media screen and (max-width: 575px){
    html,body{
        background-color: red;
    }
}

// 小屏幕
@media screen and (min-width: 576px) and (max-width: 767px){
    // ...css代码
}

// 中等屏幕
@media screen and (min-width: 768px) and (max-width: 991px){
    // ...css代码
}

// 大屏幕
@media screen and (min-width: 992px) and (max-width: 1199px){
    // ...css代码
}

// 特大屏幕
@media screen and (min-width: 1200px){
    // ...css代码
}

这个表是啥意思?

v4.bootcss.com/docs/layout…

改变浏览器大小，观察grid example的样式，实际应该表示为

class\最大宽度	超小屏幕	小屏幕	中等屏幕	大屏幕	特大屏幕
.container	100%	540px	720px	960px	1140px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-xl	100%	100%	100%	100%	1140px
.container-fluid	100%	100%	100%	100%	100%

Window matchMedia(mediaQueryString) 方法

matchMedia(mediaQueryString) 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果

matchMedia(mediaQueryString) 方法的入参可以是任何一个 CSS @media 规则 的特性, 如 min-height, min-width, orientation 等。

在浏览器的终端，改变浏览器的大小，并注意观察返回结果，不同宽度时，返回值的变化

window.matchMedia('(min-width: 1200px) and (max-width: 1599px)')

MediaQueryList虽然以List结尾，但并不是集合，而是一个普通对象

MediaQueryList 对象有以下两个属性：

• media：查询语句的内容。(类型:字符串)
• matches：用于检测查询结果，如果文档匹配 media query 列表，值为 true，否则为 false。（类型boolean）
• addListener(functionref): 添加一个新的监听器函数，该函数在媒体查询的结果发生变化时执行。
• removeListener(functionref): 从媒体查询列表中删除之前添加的监听器。      如果指定的监听器不在列表中，则不执行任何操作。
• onchange 可提供事件监听，当设备的视口，大小改变时会触发change事件。（这个事件并不会频繁触发，所以通常不会因为这个事件监听而导致性能问题）

可以使用下面的语句测试onchange事件

var mql = window.matchMedia('(max-width: 600px)');

mql.onchange = (e) => {
    if (e.matches) {
    /* 当前视口的宽度为600像素或更低 */
    console.log('当前视口的宽度为600像素或更低.')
  } else {
    /* 当前视口的宽度超过600像素 */
    console.log('当前视口的宽度超过600像素.')
  }
}