响应式的使用

响应式的使用

（随着视口的变化而应用不同的CSS样式）

书写格式：

@ media screen and (设置min与max宽度)

Eg：
@media screen and (min-width:800px)
即当视口的最小宽度大于或等于800px时，应用以下样式。
@media screen and (max-width:799px)
即当视口的最小宽度小于或等于799px时，应用以下样式。
（注：一般min-width与max-width不相等）

但是一般应用为书写多个版本的CSS，在视口的变化过程中，可以应用相应的CSS样式。
Eg：

<link  rel="stylesheet" media="screen and (min-width:800px)" href="xxxx">

即为在视口的宽度大于等于800px时，应用href引用的css

<link  rel="stylesheet" media="screen and (max-width:799px)" href="xxxx">

即为在视口的宽度小于等于799px时，应用href引用的css

<link  rel="stylesheet" media="screen and (min-width:799px) and (max-width:900px)" href="xxxx">

即为在视口的宽度大于等于799px与小于等于900px时，应用href引用的css