响应式分辨率几个划分方法

@media screen 监听页面尺寸

示例：

@media print
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(max-width:767px){}

@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，
我们判断更小的设备用@media (max-width: 767px)表示<=767就不会有冲突了。

@media screen 最小宽度

从上面的代码中，可以看出有几个临界点的分辨率，通过他们我们可以写出自己的自适应代码

/*>=768px的设备*/
@media (min-width:768px){}
/*>=992px的设备*/
@media (min-width:992px){}
/*>=1200px的设备*/
@media (min-width:1200){}

注意：使用@media 的(min-width)时，小分辨率写在上面

@media screen 最大宽度

/*<=1199px的设备*/
@media (max-width:1199px){}
/*<=991px的设备*/
@media (max-width:991px){}
/*<=768px的设备*/
@media (max-width:767px){}

注意：使用@media 的(max-width)时，大分辨率写在上面

组合使用

/*>=1200px的设备*/
@media (min-width:1200px){} 
/*<=1199px and >=960px的设备:PC端;*/
@media (min-width: 960px) and (max-width:1199px) {}
/*<=959px and >=768px的设备：PC端;*/
@media (min-width: 768px) and (max-width:959px) {}
/*<=767px and >=640px的设备：平板端或者手机横屏;*/
@media (min-width: 640px) and (max-width:767px) {}
/*<=639px and >=480px的设备：手机横屏;*/
@media (min-width: 480px) and (max-width:639px) {}
/*<=479px and >=320px的设备：手机竖屏;*/
@media (min-width: 320px) and (max-width:479px) {}
/*<=479px and >=320px的设备：手机竖屏;*/
@media (min-width: 240px) and (max-width:319px) {}
/*<=239px的设备:手机竖屏*/
@media (max-width:239px){}