摘要:當視口寬度小于等于時生效相當于當視口寬度大于等于時生效相當于當視口寬度介于和之間時生效大于等于多少,小于等于多少的寫法。舉例起初,背景色是逐漸縮小視口到,繼續(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
摘要:一些瀏覽器支持嵌套媒體查詢,例如,和但是和目前并沒有支持嵌套媒體查詢。因此,一方面,我們有一個斷點管理器從斷點的全局中選擇并處理錯誤消息,另一方面有一個斷點管理器允許使用多查詢條件。 如果你對 Sass不太熟悉的話,你可能不知道Sass增加了許多非常有趣的功能,例如媒體查詢(即 @media)功能(經(jīng)常被成為 Media Merging媒體合并)。 showImg(https://se...
閱讀 2858·2023-04-25 18:58
閱讀 985·2021-11-25 09:43
閱讀 1220·2021-10-25 09:46
閱讀 3506·2021-09-09 11:40
閱讀 1708·2021-08-05 09:59
閱讀 878·2019-08-29 15:07
閱讀 966·2019-08-29 12:48
閱讀 707·2019-08-29 11:19