@media在CSS中的查詢

我有以下的CSS來將頁面內容對齊到不同的瀏覽器大小。但是或者某種原因，它不喜歡第一個@media語句，換句話說，改變其中的任何內容都不會對佈局產生任何影響。我使用http://quirktools.com/screenfly/來驗證佈局。
改變語句的順序也會搞砸了。我失去了@media在CSS中的查詢

你的幫助是極大的讚賞

感謝

@media (min-width: 500px) and (max-width: 820px) { 
CSS HERE 
} 
@media (min-width: 830px) and (max-width: 1025px) { 
CSS HERE 
} 
@media (min-width: 1026px) and (max-width: 1580px) { 
CSS HERE 
} 
@media (min-width: 1590px) and (max-width: 2000px) { 
CSS HERE 
}

來源

2016-05-13 Torsten Dreier

首先，您要爲大於屏幕尺寸的任何內容定義屏幕尺寸，您可以從中進行媒體查詢以瞭解尺寸。

下面是一個例子。

/* Large desktop */ 
@media only screen and (min-width :75.000em) { 
    .test { 
     display: none; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media only screen and (min-width :61.250em) and (max-width:74.938em) { 
    .test { 
     display: block; 
     color: #FF0; 
    } 
} 

/* Portrait tablet to landscape and desktop */ 
@media only screen and (min-width :48.000em) and (max-width:61.188em) { 
    .test { 
     display: none; 
    } 
} 

/* Landscape phone to portrait tablet */ 
@media only screen and (min-width :30.063em) and (max-width :47.938em) { 
    .test { 
     display: none; 
    } 
} 

/* portrait phones and down */ 
@media only screen and (max-width :30.000em) { 
    .test { 
     display: block; 
     color: #FF0; 
    } 
}

來源

2016-05-13 17:57:39

你需要設置你的第一個說「任何超過(max-width: 829px)小，這樣做」

對於EG：

@media (max-width: 829px) { 
.bg {background-color:blue;} 
} 
@media (min-width: 830px) and (max-width: 1025px) { 
.bg {background-color:red;} 
} 
@media (min-width: 1026px) and (max-width: 1580px) { 
.bg {background-color:green;} 
} 
@media (min-width: 1590px) and (max-width: 2000px) { 
.bg {background-color:yellow;} 
}

看到它在此效果Plunker - 我將bg類添加到身體，以便在更改框架寬度時可以看到背景更改顏色。

你可以這樣簡化您的查詢過：

@media (max-width: 829px) { 
.bg {background-color:blue;} 
} 
@media (min-width: 830px){ 
.bg {background-color:red;} 
} 
@media (min-width: 1026px) { 
.bg {background-color:green;} 
} 
@media (min-width: 1590px) { 
.bg {background-color:yellow;} 
}

來源

2016-05-13 17:55:17 Darren

<meta name="viewport" content="width=device-width initial-scale=1" />

包括上面的代碼轉換成HTML運行媒體查詢。

來源

2016-05-13 17:55:30

@media在CSS中的查詢

回答

相關問題