开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

前言

不同分辨率下网页宽高往往不一样，所以我们一般将网页做成响应式，比如用百分比表示宽高，或者vw、vh单位表示宽高。我们还可以利用多媒体查询进行响应式设计。

定义

多媒体查询在CSS3中用@media表示，它能够检测当前设备屏幕的信息，比如电脑分辨率，手机朝向等。我们可以通过利用这个属性在不同的屏幕下设置不同的样式。具体语法为：

• @media 语法 媒体类型加上(表达式){css语法}

@media会根据表达式查询，当满足设备跟表达式的时候会返回true，就会执行CSS代码，否则为false。

语法

@media可以指定媒体类型，对应的值有以下几种：

• screen:屏幕，如手机屏幕。
• speech:阅读器。
• print:打印机。
• all:全部生效。

还有几个关键字：

• and:连接多个查询条件。

• not:not+媒体类型，排除该媒体类型。

• only:only+媒体类型，只在指定媒体类型上面生效。

指定好设备我们利用and拼接多个查询条件，达到我们想要的效果，条件表达式都是媒体特性，也就是CSS属性，比如widht、height、color等。还有一些设备属性，如：

• light-level：设备的光水平。
• orientation：设备的屏幕方法。
• min/max-resolution：设备的最小/最大分辨率。
• aspect-ratio：设备的宽高比。

用法

我们可以在CSS文件中直接利用上面的@media语法运用，也可以利用link的media属性设置：

   <!-- 在屏幕宽度大于、等于300px是a.css样式生效 -->
    <link rel="stylesheet" media="screen and (min-width:300px)" href="./a.css">

    /* 屏幕宽度小于、等于800px字体颜色为红色，背景色为橙色 */
      @media screen and (min-width:800px) {
        body{
          color: red;
          background: orange;
        }  
      }

在link中直接用media即可,我们还可以利用','逗号将多个多媒体规则合并起来。

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

总结

以上就是多媒体查询@media，我们可以用该属性做响应式页面，当表达式全部为true时，对应样式就会生效。