返回

CSS中的媒体查询

基本介绍

通过不同的媒体类型和条件定义样式表规则。
媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。
媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。如：width会有min-width和max-width。

媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。

基本用法

1
2
3
4
5
6
7
8
9
10
11
@media mediatype and | not | only (media feature) {
    /* css code here */;
}

@media screen and (width:800px){  }  /* 直接在css中 */

@import url(example.css) screen and (width:800px);  /* 直接在css中 */

<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />  /* html中通过link标签 */

<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>  /* xml中 */

各属性介绍

width: 定义输出设备中的页面可见区域宽度，与盒模型width不同，媒体特性width的取值只能是。本特性接受min和max前缀，因此可以派生出min-width和max-width两个媒体特性。

举例:

1
2
3
4
5
@media all and (min-width: 500px) and (max-width: 1000px) {
     body {
          background: red;
     }
}

height: 定义了输出设备中的页面可见区域高度，与盒模型height不同，媒体特性height的取值只能是。本特性接受min和max前缀，因此可以派生出min-height和max-height两个媒体特性。

举例:

1
2
3
4
5
@media all and (min-height: 500px) and (max-height: 1000px) {
     body {
          background: red;
     }
}

device-width: 定义输出设备的屏幕可见宽度。本特性接受min和max前缀，因此可以派生出min-device-width和max-device-width两个媒体特性。

举例:

1
2
3
4
5
@media screen and (device-width: 1024px) {
     body {
          background: red;
     }
}

device-height: 定义输出设备的屏幕可见高度。本特性接受min和max前缀，因此可以派生出min-device-height和max-device-height两个媒体特性。

举例:

1
2
3
4
5
@media screen and (device-height: 1024px) {
     body {
          background: red;
     }
}

orientation: 定义输出设备中的页面可见区域高度是否大于或等于宽度，可取值为portrait | landscape。本特性不接受min和max前缀。
partrait: 指定输出设备中的页面可见区域高度大于或等于宽度
landscape: 除portrait值情况外，都是landscape

举例:

1
2
3
@media not screen and (orientation: portrait){
     body{ color: #f00; }
}