媒体查询的用法

@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){......}