CSS Media Query学习笔记

学习地址: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;
    }
}

 

上一篇:TI深度学习(TIDL)--2


下一篇:css3响应式