Sass @media指令

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

示例

下面的例子演示了在SCSS文件中如何使用@media:

media.html

<!doctype html>
<head><meta charset="UTF-8"> <title>Media指令示例-www.e-learn.cn</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body class="container">
    <h2>Example using media directive</h2>
    <img src="images/birds.png" class="style">
</body>
</html>
接下来,创建文件media.scss。

style.scss

h2{
color: #77C1EF;
}

.style{
width: 900px;

@media screen and (orientation: portrait){
width:500px;
margin-left: 120px;
}
}
可以告诉SASS监视文件,并随时使用下面的命令更新SASS文件来修改CSS:
sass --watch C:\Ruby22-x64\style.scss:style.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文件,得到输出如下显示。