css3之@media的详细使用介绍

前言

使用css很多年了，每次使用media都需要上网查询一下，具体用法也没记住，本篇文章就帮你详细完整的介绍@media的用法，希望你可以更加了解@media的用法。如有不正确之处，还望指出，谢谢！

语法

@media: <media_query_list>
<media_query_list>: [<media_query> [’,’ <media_query>]]?
<media_query>: ([only | not ]? <media_type> [and ]) | ( [and ]*)
: ‘(’<media_feature>[:]?’)’

大致解释下：

1. @media后面可以添加多个query，使用‘,’分隔
2. query有两种写法一种使用media_type

([only | not ]? <media_type> [and <expression>]*)

一种不使用media_type

 (<expression> [and <expression>]*)

3. media_type： 媒体类型
4. expression： 指定媒体查询使用的媒体特性, 类似于css属性（如：max-width: 200px）

如果不是很明白，看完下面的例子，你就会很清楚了

举例之前，我们先了解media_type和expression都可以有那些值可以选择

media_type：媒体类型

expression 指定媒体查询使用的媒体特性, 类似于css属性（如：max-width: 200px）

用法（4种用法）

1. @import中的使用

@import url(test.css) (width:800px);

@import url(test.css) (width:800px) and (height:700px);

@import url(test.css) screen and (width:800px);

@import url(test.css) all and (max-width:500px), only screen and (min-width:1000px);

@import url(test.css) only screen and (max-width:500px), only screen and (min-width:1000px);

2. link中的使用

<link rel="stylesheet" href="test.css" media="(width:800px)">

<link rel="stylesheet" href="test.css" media="(width:800px) and (height:700px)">

<link rel="stylesheet" href="test.css" media="screen and (max-width:800px)">

<link rel="stylesheet" href="test.css" media="all and (max-width:500px), only screen and (min-width:1000px)">

<link rel="stylesheet" href="test.css" media="only screen and (max-width:500px), only screen and (min-width:1000px)">

3. css中的使用

@media  (width:800px){ … }

@media (width:800px) and (height:700px){ … }

@media screen and (max-width:800px){ … }

@media all and (max-width:500px), only screen and (min-width:1000px){ … }

@media only screen and (max-width:500px), only screen and (min-width:1000px){ … }

4. xml中的使用
   xml中使用较少，用法同上面类似。这里就不举例了

以上就是@media的全部使用方法，如如有不正确之处，还望指出，谢谢！

**

关注我：前端Jsoning

**