Media Query基本总结

Media Query

常用Media Type类型

  1. all:所有设备
  2. Screen:电脑显示器
  3. Print:打印用纸或打印预览视图

Media Type引用方法

<link>标签引用样式时,通过Link标签中的属性来指定不同的媒体类型.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />  
<link rel="stylesheet" type="text/css" href=:"print.css" media="print" />  

@import方法

@import url(reset.css) screen;
@importy url(print.css) print;

@media方式

@media screen {
    selector {
        //style 
    }
}

Media query

Media Query是CSS3对Media Type的增强版,时判断条件+符合条件的样式规则。

Media Query设备特性

  1. color:每种色彩的字节数
  2. aspect-ratio:描述设备指定区域的比例,用\表示,前面是水平像素后面时垂直像素,例如:@media screen and (min-aspect-ratio: 1/1) { ... }
  3. color-index:色彩表中的色彩数
  4. device-aspect-radio:宽高比例(Deprecated)
  5. device-height:设备屏幕的输出高度(Deprecated)
  6. device-width:设备屏幕的输出宽度(Deprecated)
  7. grid:是否基于栅格的设备,例如:@media handheld and (grid) and (max-width: 15em) { ... }
  8. height:渲染界面的高度
  9. monchrome:单色帧缓冲器中每像素字节
  10. resolution:分辨率(dpi/dpcm),例如:@media print and (min-resolution: 300dpi) { ... }。也用来代替已经废弃的device-pixel-ratio:2可以写成@media screen and (min-resolution: 2dppx) { ... }
  11. scan:TV媒体类型的扫描方式
  12. orientation:横屏或者竖屏(Portrait/Landscape),例如:@media all and (orientation: portrait) { ... }

Media Query使用方法

@media Media Type媒体类型 and (Media Query媒体特性) {
//style
    
}

使用Media Query时必须使用@media开始,然后指定媒体类型。然后指定媒体特性。

常用Media Query

  1. 最大宽度max-width:指媒体类型小于或等于指定的宽度
  2. 最小宽度min-width:媒体类型大于或指定宽度时

多个媒体特性使用

可以使用and将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含多个表达式,表达式又可以包含0到多个关键词

@media screen and (min-width:600px) and (max-width:900px) {
    body {

    }
}

设备屏幕的输出宽度Device Width

可以用min-device-widthmax-device-width

not关键词

用来排除某种制定的媒体类型,也就是排除符合表达式的设备。not关键词表示对后面的表达式执行取反操作

@media not print and (max-width:1200px) {

}

only 关键词

用来指定某种特定的媒体类型,可以排除不支持媒体查询的浏览器。很多时候only是用来对不支持Media Query却支持Media Type的设备隐藏样式表。例如支持媒体特性但支持媒体类型就不会读取only而不是screen;不支持Media Query的浏览器,不论是否支持only,样式都不会被采用

and 关键词

用来合并不同的Media Query和Media Type

@media (min-width:700px) and (orientation: landscape) {
    //style
}

多条语句将同一个样式应用于不用媒体类型和媒体特性中

使用的是逗号分隔,只要逗号隔开中的Media Query是返回真的情况,那么会应用样式

@media (min-width: 700px), handheld and (orientation: landscape) { 
    //style
}