编程知识 cdmana.com

Sass @ media directive

In this section, we learn Sass Medium @media Instructions ,@media Instructions are used to set style rules to different media types , This sum CSS The rules of use are similar , But it's a little different , Namely @media Instructions can be nested in Sass selector . It's kind of like JS Bubbling function , It bubbles to the top of the style sheet .

@media Use of instructions

Example :
.xkd{
    width: 300px;
    height: 100px;
    @media screen and (orientation: portrait) {
      width: 500px;
    }
}

Translate it into CSS Code :

.xkd {
  width: 300px;
  height: 100px;
}
@media screen and (orientation: portrait) {
  .xkd {
    width: 500px;
  }
}

orientation Used to define whether the height of the visible area of the page in the output device is greater than or equal to the width , There are two optional values ,portrait Indicates that the height of the visible area of the page in the specified output device is greater than or equal to the width , except portrait Except for the case of value , All for landscape.

@media Support nested

Example :

For example, we are in a @media Nest another @media

@media screen {
    .xkd {
      @media (orientation: landscape) {
        color: #ccc;
      }
    }
}

Translate it into CSS Code :

@media screen and (orientation: landscape) {
  .xkd {
    color: #ccc;
  }
}

版权声明
本文为[Lingcuoluo]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224110620004q.html

Scroll to Top