媒体查询的用法

@media all and (min-840px)  //所有最小水平屏幕宽度为800像素的屏幕应用规则

@media (min-800px)              //简写方式，同上

@media (min-800px) and (max-1200px)    //所有介于800px和1200px之间的屏幕应用规则

@media (min-800px) or (orentation:portrait)         //宽度至少是800px或方向是纵向的，则会应用该规则

@media (not min-800px)        //当最小宽度不是800px时 ，则会用此规则

@media (800px) and (height:400px)         //当屏幕正好是800px宽，400px高时应用规则

@media (min-700px),handheld and (orentation:landscape)    //最小宽度为700px或是横屏的手持设备上，同时应用样式

　　媒体查询应用方式有两种：

1、link元素中的css媒体查询

<link rel="stylesheet" media="(max-800px)" href="eg.css" />

2、样式表中的css媒体查询

@media (max-600px){
  .div1{
         display:none;
    }  
}

媒体查询的最佳实践：

小屏幕（平板，大于等于768px）

@media (min-768px){......}

 中等屏幕（桌面显示器，大于等于992px）

@media (min-992px){......}

大屏幕（大桌面显示器，大于等于1200px）

@media (min-1200px){......}