玩转CSS3基础——媒体查询

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

📢 大家好，我是法医，不是验尸的法医，而是写代码的法医，哈哈😅，今天给大家带来玩转CSS3基础之媒体查询

媒体查询

媒体查询英文全称 Media Query，顾名思义就是查询用户所使用的媒体或者媒介。这里的媒体指的是用户所使用的终端

到目前为止，网页的浏览终端是越来越多了，用户可以通过不同的终端来浏览网页，比如：电脑、平板电脑、手机、电视等。尽管我们无法保证一个网站在不同屏幕尺寸和不同设备上看起来一模一样，但是至少要让我们的Web页面能适配用户的终端。

然而在 CSS3 中的 Media Query （媒体查询）模块就是用来让一个页面适应不同的终端样式。

首先我们来认识一下 CSS 中所支持的媒体类型。其实在 CSS2 中常碰到的就是 all（全部）、screen（屏幕）和 print（页面打印或打印预览模式）。然而媒体的类型其实远不止这 3 种。

在 W3C 中共列出了 10 种媒体类型，如下表所示：

虽然上面列出来了这么多，但是常用的也就是 all（全部）、screen（屏幕）和 print（页面打印或打印预览模式）这三种媒体类型。

引用媒体类型的方法有很多，常见的媒体类型引用方法有：link标签，xml方式，@import，@media

@import引入媒体类型主要方式有两种，一种是在CSS文件中通过@import引入另一个样式文件，另一种是在style标签中引入

👉 需要注意的是 IE6 和 IE7不支持这种方式

🌰举个栗子：

在样式文件中引入媒体类型：

  @import url('./index.css') screen;

在style标签中引入媒体类型:

<style>
    @import url('./index.css') screen;
</style>

@media是CSS3中新引进的一个特性，叫媒体查询。@media引入媒体同样也有两种方式，如下：

在样式文件中引入媒体类型：

  @media screen {
      /*具体样式*/
  }

在style标签中引入媒体类型:

<style>
    @media screen {
      /*具体样式*/
  }
</style>

虽然上面介绍了 4 种引入方式，但是最常见的就是第 1 种和第 4 种。

这里我们可以将媒体查询看成一个公式

Media Type(判断条件) + CSS(符合条件的样式规则)

🌰举个栗子：

//表示当媒体类型是 screen 并且 屏幕最大的宽度是600px的时候，引入style.css样式
<link rel="stylesheet" media="screen and (min-width:600px)" href="style.css" />

@meida screen and (min-width:600px){
  /* 具体样式 */
}

上面的两个例子中都是使用 width 来进行的样式判断，但是实际上还有很多特性都可以被用来当作样式判断的条件。

有了 Media Query，我们能在不同的条件下使用不同的样式，使页面在不同的终端设备下达到不同的渲染效果。

这里还有个公式：

@meida 媒体类型 and (媒体特性){
  /* 具体样式 */
}

🌰举个栗子：

该媒体特性是指媒体类型小于或等于指定宽度时，样式生效，例如：

/*当屏幕宽度小于750px的时候样式生效*/
@meida screen and (max-width:750px){
  /* 具体样式 */
}

该媒体特性是指媒体类型大于或等于指定宽度时，样式生效，例如：

/*当屏幕宽度大于750px的时候样式生效*/
@meida screen and (min-width:750px){
  /* 具体样式 */
}

当需要多个媒体特性时，可以使用 and关键字将媒体特性结合在一起，例如：

/*当屏幕宽度大于等于400px并且小于等于750px的时候样式生效*/
@meida screen and (min-width:400px) and (max-width:750px) {
  /* 具体样式 */
}

not关键字可以用来排除某种媒体特性，例如：

/*样式代码将生效于除了打印设备并且屏幕宽度大于等于400px时生效*/
@meida not print and (min-width:400px) {
  /* 具体样式 */
}

👉 需要注意的是如果未指明媒体设备，那么默认为all，就是应用于所有设备

📌 以上就是CSS3的媒体查询，现在你懂了嘛？欢迎大家关注此专栏，我会一直更新下去。🙆‍♀️