媒体指令

@media 指令设置样式规则到不同的媒体类型。@media 指令可以嵌套在选择器SASS中，但它会冒泡到样式表的顶层。

例子

以下示例演示如何在SCSS文件中使用 @media :

media.html
<!doctype html>
<head>
    <title>Media directive Example</title>
    <link rel="stylesheet" href="media.css" type="text/css" />
</head>
<body class="container">
    <h2>Example using media directive</h2>
    <img src="/attachments/tuploads/sass/birds.jpg" class="style">
</body>
</html>

接下来，创建文件 media.scss 。

media.scss

h2{
color: #77C1EF;
}

.style{
width: 900px;

@media screen and (orientation: portrait){
width:500px;
margin-left: 120px;
}
}

您可以通过使用以下命令让SASS查看文件，并在SASS文件更改时更新CSS:

sass --watch C:\ruby\lib\sass\media.scss:media.css

接下来执行上面的命令，它将自动创建 media.css 文件，代码如下:

media.css
h2 {
  color: #77C1EF;
 }

.style {
  width: 900px;
  }
  @media screen and (orientation: portrait) {
    .style {
      width: 500px;
      margin-left: 120px;
      }
  }

输出

让我们执行以下步骤，看看上面的代码如何工作:

将以上html代码保存在 media.html 文件中。
在浏览器中打开此HTML文件，将显示如下输出。

Sass rules and directives

媒体指令

媒体指令

例子

media.scss

输出

选择支付方式：