CSS Media Query学习笔记

Posted 2021-11-04 慨恩的技术学习笔记

学习地址：https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

CSS Media Query学习笔记

Pattern:

@media media-type and (media-feature-rule) {

  /* CSS rules go here */

}

media-type取值（忽略的话，默认是all）：

       all（面向所有media，默认）、

       print（面向打印）、

       screen（面向屏幕）、

       speech（）。

 

media-feature-rule取值：

       取值可以是长宽：

       min-width（超过这个最小宽度才符合），

       max-width（小于这个宽度才符合）、

       width（刚好这个宽度才符合）。

       还有height及他的min和max可以作为值。

 

       取值可以是方向：

       orientation（可以是landscape横屏或portrait竖屏）。

 

       取值可以是 是否使用可悬停指针设备（一般是鼠标）：

       例子：hover: hover

      

       取值可以是指针的类型：

       pointer: none（不使用任何指针设备，可能是用键盘或者语音控制），

       pointer: fine（精确的指针设备，如鼠标），

       pointer: coarse（不精确的指针设备，如手指触摸屏）

 

       其他取值看：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features

 

 

例子：

@media screen and (width: 600px) {
    body {
        color: red;
    }
}

 

 

结合多个rule的逻辑

and例子：

@media screen and (min-width: 600px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

 

or逻辑例子(使用逗号隔开)：

@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

 

not 逻辑例子：

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

 

css media_query.css

@media not|only mediatype and (media feature) {
    CSS-Code;
}

/* 
 * example ***********/
 @media screen and (max-width:768px) {
    .mobile {
        display: block;
        background: #4caf50;
        height: 100px;
    }
}