成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

@media 媒體查詢

GraphQuery / 1923人閱讀

摘要:當視口寬度小于等于時生效相當于當視口寬度大于等于時生效相當于當視口寬度介于和之間時生效大于等于多少,小于等于多少的寫法。舉例起初,背景色是逐漸縮小視口到,繼續(xù)縮小,背景色變?yōu)槔^續(xù)縮小至,變?yōu)椤?/p>

@media screen and (max-width: 300px) {

? ? //當視口寬度小于等于300px時生效

}

?

max-width? 相當于? <=?

?

@media screen and (min-width: 300px) {

? ? //當視口寬度大于等于300px時生效

}

?

max-width? 相當于? >=?

?

@media screen and (min-windth:300px) and (max-width:600px) {

? ? //當視口寬度介于300px 和 600px 之間時生效

}

大于等于多少,小于等于多少的寫法。

?

?

?

舉例:

body{
? ? background: orange;
}
@media screen and (max-width:1200px) {
? ? body{
? ? ? ? background: green;
? ? }
}
@media screen and (max-width:1000px) {
? ? body{
? ? ? ? background: blue;
? ? }
}

起初,背景色是orange;

逐漸縮小視口到1200px,繼續(xù)縮小,背景色變?yōu)間reen;

繼續(xù)縮小至1000px,變?yōu)?blue。

文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/1557.html

相關文章

  • 詳解css媒體查詢

    摘要:媒體查詢,添加自,允許內(nèi)容的呈現(xiàn)針對一個特定范圍的輸出設備而進行裁剪,而不必改變內(nèi)容本身。而且瀏覽器也不會根據(jù)媒體查詢來動態(tài)的加載樣式,它只是一股腦的將所有的樣式引入。 簡介 媒體查詢(Media Queries)早在在css2時代就存在,經(jīng)過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

    leone 評論0 收藏0
  • 詳解css媒體查詢

    摘要:媒體查詢,添加自,允許內(nèi)容的呈現(xiàn)針對一個特定范圍的輸出設備而進行裁剪,而不必改變內(nèi)容本身。而且瀏覽器也不會根據(jù)媒體查詢來動態(tài)的加載樣式,它只是一股腦的將所有的樣式引入。 簡介 媒體查詢(Media Queries)早在在css2時代就存在,經(jīng)過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

    ymyang 評論0 收藏0
  • 詳解css媒體查詢

    摘要:媒體查詢,添加自,允許內(nèi)容的呈現(xiàn)針對一個特定范圍的輸出設備而進行裁剪,而不必改變內(nèi)容本身。而且瀏覽器也不會根據(jù)媒體查詢來動態(tài)的加載樣式,它只是一股腦的將所有的樣式引入。 簡介 媒體查詢(Media Queries)早在在css2時代就存在,經(jīng)過css3的洗禮后變得更加強大bootstrap的響應式特性就是從此而來的. 簡單的來講媒體查詢是一種用于修飾css何時起作用的語法. Media...

    gotham 評論0 收藏0
  • Sass Mixin 和 Media Merging

    摘要:一些瀏覽器支持嵌套媒體查詢,例如,和但是和目前并沒有支持嵌套媒體查詢。因此,一方面,我們有一個斷點管理器從斷點的全局中選擇并處理錯誤消息,另一方面有一個斷點管理器允許使用多查詢條件。 如果你對 Sass不太熟悉的話,你可能不知道Sass增加了許多非常有趣的功能,例如媒體查詢(即 @media)功能(經(jīng)常被成為 Media Merging媒體合并)。 showImg(https://se...

    Cciradih 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<