media screen 的書寫順序

2021-07-05 16:11:23 字數 915 閱讀 8436

.class1

.class2

而某個元素指定class時採用 class=」class2 class1″這種方式指定,此時雖然class1在元素中指定時排在class2的後面,但因為在樣式表檔案中class1處於class2前面,此時仍然是class2的優先順序更高,color的屬性為red,而非black。(此段來自

接下來入正題:

從上面我們可以看出有幾個臨界點的解析度,那麼我們就可以輕鬆的來寫自己的自適應**了

@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)

但是建議是只寫max-width的話由大畫素寫到小畫素,min-width按小畫素到大畫素的順序,從上往下寫,不然會達不到控制的樣式目的。

當然如果用and連線min-width和max-width的寫法就另說了,不過養成良好的習慣可以避免後續的小麻煩

利用 media screen實現網頁布局的自適應

經常為不同解析度裝置或不同視窗大小下布局錯位而頭疼,可以利用 media screen實現網頁布局的自適應,優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小 只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 media screen and m...

利用 media screen實現網頁布局的自適應

經常為不同解析度裝置或不同視窗大小下布局錯位而頭疼,可以利用 media screen實現網頁布局的自適應。優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小,只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值。以下是針對自用主題而寫的css,對寬...

利用 media screen實現網頁布局的自適應

利用 media screen實現網頁布局的自適應 優點 無需外掛程式和手機主題,對移動裝置友好,能夠適應各種視窗大小。只需在css中新增 media screen屬性,根據瀏覽器寬度判斷並輸出不同的長寬值 1280解析度以上 大於1200px media screen and min width ...