css3媒体判断根据宽度大小来显示不同内容

做网站的时候，经常会遇到有些内容不想在小屏幕设备上显示，那就需要用到css3媒体判断，根据宽度大小来显示不同内容。

运用@media实现网页自适应中的几个关键分辨率

从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了

@media screen and (min-width: 768px)    /* >=768像素的设备  */
@media screen and (min-width: 992px)    /* >=992像素的设备  */
@media screen and (min-width: 1200px)  /* >=1200像素的设备 */

注意下顺序，如果你把@media (min-width: 768px)写在了下面就会出现问题；

@media screen and (min-width: 1200px)    /*  >=1200像素的设备 */
@media screen and (min-width: 992px)   /*  >=992像素的设备  */
@media screen and (min-width: 768px)   /*  >=768像素的设备  */

因为如果是1440,由于1440>768那么1200判断就会失效。

所以我们用min-width时，小的放上面写，大的写下面，同理如果是用max-width那么就是大的写在上面，小的写在下面。

@media screen and (max-width: 1199px)     /*  <=1199像素的设备 */
@media screen and (max-width: 991px)     /*  <=991像素的设备  */
@media screen and (max-width: 768px)     /*  <=768像素的设备  */

举例A：当屏幕宽度大于等于992像素的时候，隐藏class为admin的div的css代码写法如下；

@media screen and (min-width: 992px) {
 .admin { display:none;}
}

举例B：当屏幕宽度小于等于992像素的时候，隐藏class为admin的div的css代码写法如下；

@media screen and (max-width: 992px) {
 .admin { display:none;}
}