運用 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: 1200)

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

@media (min-width: 1200)

@media (min-width: 992px)

@media (min-width: 768px)

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

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

@media (max-width: 1199)

@media (max-width: 991px)

@media (max-width: 767px)

經過了上面的入門學習，我們就可以靈活的來點高階的混合應用了

@media screen and (min-width:1200px)#content,.div1#secondary } 

@media screen and (min-width: 960px) and (max-width: 1199px) #content,.div1#secondaryselect }

@media screen and (min-width: 768px) and (max-width: 959px) #content,.div1#secondaryselect }

@media only screen and (min-width: 480px) and (max-width: 767px)#content,.div1#secondary#access#access a #access a img#rss#branding #s } 

@media only screen and (max-width: 479px) #content,.div1#secondary#access #access a #access a img#rss#branding #s#access ul ul a }

media 實現網頁自適應

media 其實就是判斷螢幕多大的解析度 然後選用什麼 css樣式 media screen and min width 413px 例子就是這樣的 min 相當於 這個符號 max 相當於 這個符號 多個 判斷 區間 用 and相連 media screen and min width 413px...

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

1,先看下面的 這是從bootstrap中遍歷出來的，min width來確認分別是 768 992 1200。當然了過去也有些裝置寬度是600 480的，哪些小解析度的我們都歸類為小於767的。為什麼是小於767而不是768呢，那是因為在css中 media min width 768px 表示最...

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

先看下面的 這是從bootstrap中遍歷出來的，min width來確認分別是 768 992 1200。當然了過去也有些裝置寬度是600 480的，哪些小解析度的我們都歸類為小於767的。為什麼是小於767而不是768呢，那是因為在css中 media min width 768px 表示最小是...