@media实现网页自适应的几个关键分辨率
不同分辨率设备或不同窗口大小下网页布局经常是不同的，一不小心就会发生错位，可以利用@media screen实现网页布局的自适应，但是怎样兼容所有主流设备就成了问题。到底分辨率是多少的时候设置呢？首先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是768、992、1200。当然了过去也有些设备宽度是600、480的，那些小分辨率的我们都归类为小于767的。为什么是小于767而不是768呢，那是因为在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，所以我们判断更小的设备用@media (max-width: 767px)表示<=767就不会有冲突了。
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(max-width:767px){}
从上面我们可以看出有几个临界点的分辨率，那么我们就可以轻松的来写自己的自适应代码了
@media(min-width:768px){//>=768px的设备}
@media(min-width:992px){//>=992px的设备}
@media(min-width:1200px){//>=1200px的设备}
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，
@media (min-width:1200px){//>=1200px的设备}
@media (min-width:992px){//>=992px的设备}
@media (min-width:768px){//>=768px的设备}
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面(从小到大)，同理如果是用max-width那么就是大的在上面，小的在下面(从大到小)
@media (max-width:1199px){<=1199px的设备}
@media (max-width:991px){<=991px的设备}
@media (max-width:767px){<=768px的设备}
经过上面的入门学习，我们就可以灵活地来电高级的混合应用了，讲一个页面用到的关键分辨率和对应设备列出如下：
@media and(min-wid:1200px){//>=1200px的设备}
@media and (min-width:960px) and (max-width:1199px) {//<=1199px和>=960px的设备：PC端}
@media and (min-width:768px) and (max-width:959px){//<=959px and >=768px的设备：PC端}
@media and (min-width:640px) and (max-width:767px){//<=767px和>=640px的设备：平板端或者手机横屏；}
@media and (min-width:480px) and (max-width:639px){//<=639px和>=480px的设备：手机横屏}
@media and (min-width:320px) and (max-width:479px){//<=479px and >=320px的设备：手机竖屏}
@media and (min-width:240px) and (max-width:319px){//<=319px and >=240px的设备：手机竖屏}
@media and (max-width:239px){//<=239px的设备：手机竖屏}
一般情况下，低于480px分辨率的屏幕归为一类。
Written on March 20, 2017