媒体查询简介

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口，可以根据设备的类型(屏幕设备、打印机设备)或者特定的特性(比如屏幕宽度)来修改页面

媒体查询的使用方式

媒体查询的使用方式主要有三种

1. 通过@media和@import使用不同的CSS规则(常用)

@import url(./css/body_bgc.css) (max-width: 800px);

2. 使用media属性为style, link, source和其它HTML元素指定特定的媒体类型

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

3. 使用@media

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

@media screen {
  
}

媒体查询--媒体类型

在使用媒体查询时，必须指定要使用的媒体类型；媒体类型是可选的，并且会隐式地应用all类型

常用的媒体类型值如下

• all: 适用于素有设备
• print: 使用与在打印预览模式下在屏幕上查看的分页材料和文档
• screen: 重点，主要应用于屏幕
• speech: 主要适用于语音合成器

媒体查询--媒体特性

媒体特性描述了浏览器、输出设备或者是预览环境的具体特征，通常会将媒体特性描述为一个表达式；每条媒体特性表达式都必须用括号括起来

媒体查询--逻辑操作符

媒体查询的表达式最终会获得一个boolean值。如果结果为真，那么就会生效；如果结果为假，那么就不会生效。

如果有多个条件，我们就可以通过逻辑操作符联合复杂的媒体查询

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

例如，当屏幕宽度大于500， 小于700的时候，body背景是红色

@media screen and (min-width: 500px) and (max-width: 700px){
    body{
        background-color: #f00;
    }
}

常见的移动端设备