免費(fèi)AI編程助手
Sass 媒體指令
2018-12-30 16:59 更新
描述
@media 指令設(shè)置樣式規(guī)則到不同的媒體類(lèi)型。@media 指令可以嵌套在選擇器SASS中，但它會(huì)冒泡到樣式表的頂層。
例子
以下示例演示如何在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>
接下來(lái)，創(chuàng)建文件 media.scss 。
media.scss
h2{
color: #77C1EF;
}
.style{
width: 900px;
@media screen and (orientation: portrait){
width:500px;
margin-left: 120px;
}
}
您可以通過(guò)使用以下命令讓SASS查看文件，并在SASS文件更改時(shí)更新CSS:
sass --watch C:\ruby\lib\sass\media.scss:media.css
接下來(lái)執(zhí)行上面的命令，它將自動(dòng)創(chuàng)建 media.css 文件，代碼如下:
media.css
h2 {
color: #77C1EF;
}
.style {
width: 900px;
}
@media screen and (orientation: portrait) {
.style {
width: 500px;
margin-left: 120px;
}
}
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
將以上html代碼保存在 media.html 文件中。
在瀏覽器中打開(kāi)此HTML文件，將顯示如下輸出。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：