@media實現網頁自適應中的幾個關鍵解析度

qq_23944441發表於2018-04-02
網頁

不同解析度裝置或不同視窗大小下網頁佈局經常是不同的,一不小心就會發生錯位。可以利用@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 (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的裝置:手機豎屏}


出處：https://www.cnblogs.com/jerrychane/p/6066416.html

相關文章