css3媒体查询

什么是响应式？

让我们的网页在不同尺寸的屏幕上有不同的显示效果。
注意理解有的时候只是页面中的一部分响应(页面复杂的时候），并不是要全部响应。理想的状态是大屏幕和小尺寸的屏幕是两套不同的布局，这样更好维护。

媒体设备选择（在style标签）

screen(屏幕） print(打印)

<style media="screen"></style>
<style media="print"></style>
<style media="all"></style>所有设备
<style media="screnn,print"></style>

媒体设备选择（在link标签）

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

使用@import简化多文件引入

<link rel="stylesheet" type="text/css" href="index.css" />
/*index.css*/
@import url(screen.css) screen
@inport url(print.css) print
@import url(comon.css) all

在样式表中使用@media局部定义响应查询

/*屏幕缩小时导航栏改变*/

and条件判断响应式使用

逻辑与

逻辑或条件响应式判断，使用逗号，

/*在横屏或者宽度大于768px时的样式*/
<style media="screen and (orentation:landscape),screen and (min-width:768px)">

逻辑非 not条件响应式判断

not 写在整个表达式的前边

/*屏幕宽度不在500px~768px之间时显示如下样式*/
<style>
	@media not screen and (min-width:500px) and (max-width:768px){}
</style>

使用only 排除低端浏览器

/*支持媒体查询的浏览器才会使用如下样式*/
<style>
	@media only not screen and (min-width:500px) and (max-width:768px){}
</style>

demo样例