@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 print
@media（min-width:768px）{}
@media（min-width:992px）{}
@media（min-width:1200px）{}
@media（max-width:767px){}

從上面我們可以看出有幾個臨界點的分辨率，那么我們就可以輕松的來寫自己的自適應代碼了

@media screen (min-width:768px){ //>=768px的設備 }
@media screen (min-width:992px){ //>=992px的設備 }
@media screen (min-width:1200){ //>=1200px的設備 }

注意下順序，如果你把@media (min-width: 768px)寫在了下面那么很悲劇，

@media screen (min-width:1200px){ //>=1200px的設備 }
@media screen (min-width:992px){ //>=992px的設備 }
@media screen (min-width:768px){ //>=768px的設備 }

因為如果是1440,由於1440>768那么你的1200就會失效。

所以我們用min-width時，小的放上面大的在下面(從小到大)，同理如果是用max-width那么就是大的在上面，小的在下面(從大到小)

@media screen (max-width:1199px){ //<=1199px的設備 }
@media screen (max-width:991px){ //<=991px的設備 }
@media screen (max-width:767px){ //<=768px的設備 }

經過了上面的入門學習，我們就可以靈活的來點高級的混合應用了,將一個頁面用到的關鍵分辨率和對應設備列出如下：

@media screen and (min-width:1200px){//>=1200px的設備} 
@media screen and (min-width: 960px) and (max-width:1199px) {//<=1199px and >=960px的設備:PC端;}
@media screen and (min-width: 768px) and (max-width:959px) {//<=959px and >=768px的設備：PC端;}
@media screen and (min-width: 640px) and (max-width:767px) {//<=767px and >=640px的設備：平板端或者手機橫屏;}
@media screen and (min-width: 480px) and (max-width:639px) {//<=639px and >=480px的設備：手機橫屏;}
@media screen and (min-width: 320px) and (max-width:479px) {//<=479px and >=320px的設備：手機豎屏;}
@media screen and (min-width: 240px) and (max-width:319px) {//<=479px and >=320px的設備：手機豎屏;}
@media screen and (max-width:239px){//<=239px的設備:手機豎屏}