关于媒体查询的那些事

媒体查询

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

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

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

Media Type 媒体类型

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

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

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

媒体类型引用方法

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

1. link标签

   link标签引入媒体类型其实就是在link标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型，比如：

   html
   复制代码
    <link rel="stylesheet" href="index.css" media="screen">
    <link rel="stylesheet" href="demo.css" media="print">
   

2. xml方式

   xml方式和link方式比较相似，也是通过media属性来指定，如下：

   html
   复制代码
   <? xml-stylesheet rel="stylesheet" media="screen" href="index.css" ?>
   

3. @import

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

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

🌰举个栗子：

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

css
复制代码
  @import url('./index.css') screen;

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

css
复制代码
<style>
    @import url('./index.css') screen;
</style>

4. @meida 方式

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

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

css
复制代码
  @media screen {
      /*具体样式*/
  }

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

css
复制代码
<style>
    @media screen {
      /*具体样式*/
  }
</style>

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

作者：法医
链接：juejin.cn/post/710219…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。