CSS Media Query

1. 根据viewport的size，响应不同的layout
2. 检测touchscreen or mouse。

语法：
@media media-type and (media-feature-rule){
  /* CSS rules go here*/
}

it consists of 
  • meida type(the code for print or screen);  alll, print, screen, speech.
  • media expression; 
  • a set of CSS rules;


过期
@media print {
    body {
        font-size: 12pt;
    }
}



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


orientation: landscape   
landscape: 表示viewport的宽度>高度

orientation: portrait
portrait: 表示viewport的宽度=< 高度

monochrome


dimension
orientation  美 [ˌɔːriənˈteɪʃn]

触摸屏
As part of the Level 4 specification, the hover media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover.

@media (hover: hover) {
    body {
        color: rebeccapurple;
    }
}

触摸屏适合 coarse

pointer:  find and coarse   and none :  鼠标是精细还是粗糙， 粗糙适合手指点击，精细适合鼠标点击

合并media queries,   && 和 ||，分别用 and 和 ,  连接

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


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

“not” logic in media queries

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




阅读量: 605
发布于:
修改于: