媒体特性是媒体类型的增强版，看以看做“媒体类型+应用条件”。例如：

@media screen and (max-width:500px){ css样式内容...}

以上代码的意思是当媒体类型的宽度小于等于500px时，对电脑显示器应用css样式内容。

对于媒体特性需要注意以下几点：

• 媒体特性是一个用于判断输出设备是否满足某种条件的表达式。

• 媒体特性只接受单个逻辑表达式作为其值。

• 媒体特性多数情况下接受min/max前缀，用来表达逻辑关系，即表示应用于大于等于或小于等于某个值的情况。

• 媒体特性可以没有值，因为表达式返回的只有真或假两种结果。
  

媒体特性常用的设备特性主要有以下这些：

媒体特性的使用方法可以简单的表示为：

@media 设备类型 and （媒体特性） { css样式内容...}

使用媒体特性时必须以@media开头，然后指定设备类型，随后指定媒体特性，最后是具体的css样式。

媒体特性在实际应用中的常见方式有：

1、最大宽度max-width

意思是指媒体类型小于等于指定的宽度是，样式生效。例如：

@media screen and ( max-width:500px){
    p{ font-size:14px;}
}

以上代码表示：当屏幕小于或等于500px时，页面中的p标签字体大小设为14px。

2、最小宽度min-width

意思是指媒体类型大于或等于指定宽度时，样式生效。例如：

@media screen and ( min-width:1000px){
    p{ font-size:20px;}
}

以上代码表示：当屏幕大于或等于1000px时，页面中的p标签字体大小设为20px。

3、多个媒体特性的使用

可以使用关键字“and”将多个媒体特性结合在一起使用。例如：

@media screen and ( min-width:500px) and (max-width:1000px){
    p{ font-size:18px;}
}

以上代码表示：当屏幕大小在500~1000px之间时，页面中的p标签字体大小设为18px。

4、设备屏幕的输出宽度Device Width

对于手机等设备，可以根据屏幕尺寸来设置相应的样式。此时，同样可以使用min/max前缀。例如：

<link rel="stylesheet" media="screen and (max-device-width:720px)" href="phone.css" />

以上代码表示：phone.css样式适用于最大屏幕宽度为720px。max-device-width是设备的实际分辨率。

5、关键字not

not用于排除某种指定的媒体类型，即排除符合表达式的设备，是取反操作。例如：

@media not print and (max-width:1024px) { css样式内容...}

以上代码表示：样式将被应用于除打印设备和媒体宽度小于1024px的所有设备。

6、关键字only

only用于指定某种特定的媒体类型，可以排除不支持媒体查询的浏览器。

7、其他

当不明确指定设备类型时，默认为all。例如：

<link rel="stylesheet" media="(min-width:500px) and (max-width:1000px)" href="main.css" />

可以使用多条语句将同一个样式应用于不同的设备类型和媒体特性中。例如：

<link rel="sytlesheet" media="handheld and (min-width:480px),screen and (min-width:720px)" 
href="main.css" />

以上代码表示：样式将被应用于宽度不小于480px的手持设备和宽度不小于720px的屏幕设备上。