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

不一样分辨率设备或不一样窗口大小下网页布局常常是不一样的,一不当心就会发生错位。能够利用@media screen实现网页布局的自适应,可是怎样兼容全部主流设备就成了问题。到底分辨率是多少的时候设置呢？首先看下面的代码,这是从bootstrap中遍历出来的，min-width来确认分别是76八、99二、1200。固然了过去也有些设备宽度是600、480的，那些小分辨率的咱们都归类为小于767的。为何是小于767而不是768呢，那是由于在css中@media (min-width: 768px)表示最小是768也就是>=768，这里有等于，因此咱们判断更小的设备用@media (max-width: 767px)表示<=767就不会有冲突了。

@media print
@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:1200){ //>=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-width:1200px){//>=1200px的设备} 
@media and (min-width: 960px) and (max-width:1199px) {//<=1199px and >=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 and >=640px的设备：平板端或者手机横屏;}
@media and (min-width: 480px) and (max-width:639px) {//<=639px and >=480px的设备：手机横屏;}
@media and (min-width: 320px) and (max-width:479px) {//<=479px and >=320px的设备：手机竖屏;}
@media and (min-width: 240px) and (max-width:319px) {//<=479px and >=320px的设备：手机竖屏;}
@media and (max-width:239px){//<=239px的设备:手机竖屏}