第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

章節(jié)
問答
課簽
筆記
評(píng)論
占位
占位

@media

Sass 中的 @media 指令和 CSS 的使用規(guī)則一樣的簡(jiǎn)單,但它有另外一個(gè)功能,可以嵌套在 CSS 規(guī)則中。有點(diǎn)類似 JS 的冒泡功能一樣,如果在樣式中使用 @media 指令,它將冒泡到外面。來看一個(gè)簡(jiǎn)單示例:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯出來:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

@media 也可以嵌套 @media:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

此時(shí)編譯出來:

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

在使用 @media 時(shí),還可以使用插件#{}:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

編譯出來的 CSS:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

任務(wù)

小伙伴們,現(xiàn)在讓我們來練習(xí)一下@media的用法吧!

?不會(huì)了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請(qǐng)驗(yàn)證,完成請(qǐng)求

由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求

加群二維碼

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

  • · 粉絲專屬優(yōu)惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復(fù)提醒
  • · 賬號(hào)支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請(qǐng)您關(guān)注公眾號(hào)
關(guān)注后,及時(shí)獲悉本課程動(dòng)態(tài)

舉報(bào)

0/150
提交
取消
全部 精華 我要發(fā)布
全部 我要發(fā)布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費(fèi)2個(gè)積分

你的積分不足,無法發(fā)表

為什么扣積分?

本次提問將花費(fèi)2個(gè)積分

繼續(xù)發(fā)表請(qǐng)點(diǎn)擊 "確定"

為什么扣積分?