@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的設備:手機豎屏}