Zitat von
BugBuster
Da sind einige Überschneidungen drin die für mich irgendwie kein Sinn ergeben.
Frage an die CSS Experten: Was passiert in dem Fall? Werden hier dann alle 3 "gemerged" von oben nach unten oder ersetzen die sich so daß dann nur die dritte gilt?
Habe damit so im Detail noch nicht gespielt, mein Grid wo ich auch Media Querys einsetze hat keine Überschneidung und bezieht sich generell nur auf die Breite.
Wenn die media queries Überschneidungen haben, werden die Anweisungen so wie in css üblich von oben nach unten abgearbeitet. Werden gleiche Selektoren und Eigenschaften angesprochen, kommt es zum Überschreiben.
@Infidel
Code:
/* 1024 screens */
@media only screen and (max-width:1024px) and and (min-height:601px) {
}
/* 1024 / 600 screens */
@media only screen and (min-width:1024px) and (min-height:599px) {
}
/* big screens */
@media only screen and (min-width:1025;) {
}
Im Code oben ist
- ein "and" zuviel und einmal fehlen die Pixel
- mit der ersten Zeile sprichst Du alle kleinen Bildschirme (bis einschließlich 1024px) und einer Mindesthöhe von 601px
- mit der zweiten Zeile alle großen Bildschirme (ab einschließlich 1024px) mit einer Mindesthöhe von 599px
- mit der dritten Zeile überschreibst Du ggf. die Anweisungen aus zweiten Zeile
Wenn die zwei Pixel Unterschied in der Höhe nicht kriegsentscheidend sind, könntest Du auch alle Bildschirme mit einer Mindesthöhe von 600px (bzw. 601px oder 599px) ansprechen und zwar als letzten Punkt
Also nur
Code:
...
/* 640 screens */
@media only screen and (min-width:640px) {
}
/* 1023 screens */
@media only screen and (min-width:1023px) {
}
/* big screens */
@media only screen and (min-width:1024px;) {
/* hohe screens */
@media only screen and (min-height:600px) {
}
Fall es doch wichtig ist
Code:
...
/* 640 screens */
@media only screen and (min-width:640px) {
}
/* 1023 screens */
@media only screen and (min-width:1023px) {
}
/* big screens */
@media only screen and (min-width:1024px;) {
/* kleine hohe screens */
@media only screen and (max-width:1024px) and (min-height:601px) {
}
/* große hohe screens */
@media only screen and (min-width:1024px) and (min-height:599px) {
}
In jedem Fall machst Du also zuerst alle Angaben die ausschließlich von der Breite abhängen, danach kommen die Angaben die ab einer bestimmten Höhe des Bildschirms anders sein sollen also überschrieben werden oder zusätzlich dazu kommen.
Ich hoffe ich habe mich halbwegs verständlich ausgedrückt.
Nachtrag: Wobei Du dann sicher den Unterschied zwischen 1023px und 1024px (nur Breite) gar nicht brauchst.
Lesezeichen