@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){
......}
转载于:https://www.cnblogs.com/chengkun101/p/4623153.html
相关资源：JAVA上百实例源码以及开源项目
