标签：
@media all and (min-width:840px) //所有最小水平屏幕宽度为800像素的屏幕应用规则 @media (min-width:800px) //简写方式，同上 @media (min-width:800px) and (max-width:1200px) //所有介于800px和1200px之间的屏幕应用规则 @media (min-width:800px) or (orentation:portrait) //宽度至少是800px或方向是纵向的，则会应用该规则 @media (not min-width:800px) //当最小宽度不是800px时 ，则会用此规则 @media (width:800px) and (height:400px) //当屏幕正好是800px宽，400px高时应用规则 @media (min-width:700px),handheld and (orentation:landscape) //最小宽度为700px或是横屏的手持设备上，同时应用样式
媒体查询应用方式有两种：
1、link元素中的css媒体查询
<link rel="stylesheet" media="(max-width:800px)" href="eg.css" />
2、样式表中的css媒体查询
@media (max-width:600px){ .div1{ display:none; } }
媒体查询的最佳实践：
小屏幕（平板，大于等于768px）
@media (min-width:768px){......}
中等屏幕（桌面显示器，大于等于992px）
@media (min-width:992px){......}
大屏幕（大桌面显示器，大于等于1200px）
@media (min-width:1200px){......}
标签：
原文地址：http://www.cnblogs.com/chengkun101/p/4623153.html
