CSS - 媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口

你可以根据设备的类型(比如屏幕设备、打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面

使用媒体查询的方式

结合@import

/* @import是可以和媒体查询结合来使用 */
@import url(./css/body_bgc.css) (max-width: 800px);

结合link元素

<link rel="stylesheet" media="screen and (max-width: 800px)" href="./css/body_bgc.css">

@media

/*
    link和@import结合媒体查询的时候，是在符合条件的时候引入对应的css文件
    但是@media是在符合条件的时候应用对应的css样式
*/
@media (max-width: 800px) {
  body {
    background-color: orange;
  }
}

4，使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态；

window.matchMedia --- 检测是否符合对应的媒体查询条件

// matchMedia函数的参数是一个字符串，值为媒体查询条件，所以需要加上小括号
// matchMedia函数的返回值一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果
/*
 MediaQueryList的形式类似于
 {
   matches: true --- 媒体查询条件是否匹配
   media: "(min-width: 700px)" --- 媒体查询条件
  }
*/
if (matchMedia('(min-width: 700px)').matches) {
  console.log('设备的尺寸大于或等于700px')
} else {
  console.log('设备的尺寸小于700px')
}

const matchFunction = e => console.log(e)

const mediaQuery = matchMedia('(min-width: 700px)')
// matchMedia函数返回的 MediaQueryList对象，有一个属性addListener, 可以在媒体查询发生改变的时候被执行
// 其传入的函数会在从不满足媒体查询条件到满足媒体查询条件或从满足媒体查询条件到不满足媒体查询条件的时候被触发
mediaQuery.addListener(matchFunction)

// 同样的，MediaQueryList对象上存在属性removeListener来移除对应的监听
// 传入的参数必须和addListener时候传入的监听函数是同一个引用
mediaQuery.removeListener(matchFunction)

媒体类型

所谓媒体类型就是设备类型

设备类型	说明
all	默认值表示的是对所有类型的设备都运用一样的样式
screen	针对浏览器屏幕的变化
print	应用于打印机
speech	应用于语言合成设备

媒体特性

媒体特性(Media features)描述了浏览器、输出设备，或是预览环境的具体特征

通常会将媒体特性描述为一个表达式
而每条媒体特性表达式都必须用括号括起来
最为常用的媒体特性为设备的宽度或高度

特征	价值	最小/最大	描述
宽度width	长度	是的	渲染表面的宽度
高度height	长度	是的	渲染表面的高度
颜色color	整数	是的	每个颜色分量的位数
设备比例device-aspect-ratio	整数/整数	是的	长宽比
设备高度device-width	长度	是的	输出设备的高度
设备宽度device-height	长度	是的	输出设备的宽度
方向orientation	“portrait”或“landscape”	不	屏幕方向
分辨率resolution	分辨率(“ dpi”，“ dpcm”或“ dppx”)	是的	解析度

逻辑操作符(logical operators)

媒体查询的表达式最终会获得一个Boolean值，也就是真(true)或者假(false)

如果结果为真(true)，那么就会生效
如果结果为假(false)，那么就不会生效

逻辑操作符	说明
and	and 操作符用于将多个媒体查询规则组合成单条媒体查询
not	not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false
only	only运算符仅在整个查询匹配时才用于应用样式
, (逗号)	逗号用于将多个媒体查询合并为一个规则

    @media (min-width: 500px) and (max-width: 800px) {
      body {
        background-color: orange;
      }
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 
      320~375之间 font-size: 15px;
      375~414之间 font-size: 18px;
      414~480之间 font-size: 21px;
      大于480px font-size: 24px
    */
    /* @media (min-width: 320px) and (max-width: 375px) {
      .box { font-size: 15px; }
    }
    @media (min-width: 375px) and (max-width: 414px) {
      .box { font-size: 18px; }
    }
    @media (min-width: 414px) and (max-width: 480px) {
      .box { font-size: 21px; }
    }
    @media (min-width: 480px) {
      .box { font-size: 24px; }
    } */

    /* CSS层叠性 */
    /*
      使用这种写法和之前的写法的不同在于
      使用这种写法是运用了css的层叠性

      如果宽度为400px的时候
      第一条媒体查询和第二条媒体查询都会被匹配上
      此时对应的css样式就会被设置两遍
      而后边的css样式会把前面的css样式给层叠掉
    */
    
    
    
    @media (min-width: 320px) {
      .box { font-size: 15px; }
    }
    @media (min-width: 375px) {
      .box { font-size: 18px; }
    }
    @media (min-width: 414px) {
      .box { font-size: 21px; }
    }
    @media (min-width: 480px) {
      .box { font-size: 24px; }
    }

  </style>
</head>
<body>
  
  <div class="box">
    我是box
  </div>

</body>
</html>

19_CSS - 媒体查询

CSS - 媒体查询

使用媒体查询的方式

媒体类型

媒体特性

逻辑操作符(logical operators)