Wie kann ich mehrere Medienabfragen verwenden?

Ich habe diesen Code und ich habe versucht herauszufinden, warum es nicht funktioniert. Ich habe mehrere Antworten auf ganz ähnliche Fragen gelesen, aber ich verstehe es einfach nicht. Ist der Code (max-width: 480) für alle anderen größeren Medienanfragen gültig? Das einzige, was ich mit der Arbeit sehen kann, ist der (max-width: 1000)Wie kann ich mehrere Medienabfragen verwenden?

@media screen and (max-width: 1000px) { 
 
    .figur { 
 
    display: none; 
 
    } 
 
    #about { 
 
    width: 100%; 
 
    } 
 
    #map { 
 
    width: 100%; 
 
    } 
 
} 
 
@media screen and (max-width: 720px) { 
 
    .parallax { 
 
    background-image: url("../img/bamseLiten.jpeg"); 
 
    } 
 
    .row .column { 
 
    width: 100%; 
 
    height: 200px; 
 
    } 
 
} 
 
@media all and (max-width: 480px) { 
 
    #logo { 
 
    display: block; 
 
    width: 70%; 
 
    align-self: center; 
 
    } 
 
    .menu li { 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
}

Quelle

2017-12-04 Helledusten

ist es nicht klar, was Sie erreichen möchten. Bitte verwenden Sie eine Code-Sharing-Site wie [jsfiddle] (https://jsfiddle.net/) oder eine andere, um Ihr Problem besser zu demonstrieren. – SALEH

Ist '.figur' ein Tippfehler? Sie können den MQ (erste Zeile mit Bedingung und '{' + '}') entfernen und sehen, ob die Regeln in ihm jetzt einen Effekt haben (vielleicht ist das Bild ein 404). Ich benutze die folgende Debug-Anzeige: https://codepen.io/PhilippeVay/pen/VrRagy (mit einer Menge Hintergrundfarbe auf Elemente und Körper), kann es auch für Sie nützlich sein :) – FelipeAls

Wie testen Sie das?

Sie müssen sicherstellen, dass Sie in der Lage sind, die Bildschirmgröße zu ändern ... chrome bietet anständige Fähigkeit, dies mit inspizieren zu tun.

Sie können versuchen, eine minimale Breite zusammen mit dem max zu verwenden?

@media only screen and (min-width: 768px) and (max-width: 990px) { 
    .class { 
    position: fixed; 
    top: 0; 
    height:40px; 
    } 
}

Quelle

2017-12-04 05:10:02 hackdotslashdotkill

Ich bin mit dem Web inspizieren -developer (von Pederick) -resize-anzeigen responsive Layouts. Nur eines der sieben Dinge, die ich ändern möchte, ändert sich tatsächlich. Ich denke, es muss etwas sein, das ich falsch verstanden habe. Muss ich die Bedingungen in kleineren Medienabfragen wiederholen oder addieren sie sich, wenn die Bildschirmgröße kleiner als 480 Pixel ist? – Helledusten

Fragen Sie, ob Medienabfragen gestapelt werden? Wenn ja, dann ja! Sie stapeln wie die üblichen CSS. Wenn es einen Konflikt gibt, übernimmt die letzte erklärte Medienabfrage. Es ist der gleiche Kaskadeneffekt. – hackdotslashdotkill

ich mit @hackdotslahdotkill zustimmen, wenn Sie bestimmt CSS zu haben versuchen, für jeden Haltepunkt dann eine minimale und maximale Breite wie folgt verwenden:

@media screen (min-width: 320px) and (max-width: 767px) { 
    body { 
    margin: 0 10%; 
    } 
} 
@media screen (min-width: 768px) and (max-width: 1280px) { 
    body { 
    margin: 0; 
    } 
}

Wenn Sie den Haltepunkt kaskadieren mögen Sie kann es wie folgt tun:

body { 
    margin: 0 10%; 
} 
@media screen (min-width: 768px) { 
    body { 
    margin: 0; 
    } 
}

Quelle

2017-12-04 06:12:34

Für maximales Gerät Vergleichbarkeit und die Annahme Sie Bootstrap verwenden können 4+ wie Media-Abfrage

// Small devices (landscape phones, 576px and up) 
@media (max-width: 575px) { 
} 

// Medium devices (tablets, 768px and up) 
@media (max-width: 767px) { 

} 

// Large devices (desktops, 992px and up) 
@media (max-width: 991px) { 

} 

// Extra large devices (large desktops, 1200px and up) 
@media (max-width: 1199px) { 

}

Für Ultra Mobile Zuerst kann man min-width statt max-width verwenden, wie das ist -

// Small devices (landscape phones, 576px and up) 
@media (min-width: 576px) { 

} 

// Medium devices (tablets, 768px and up) 
@media (min-width: 768px) { 

} 

// Large devices (desktops, 992px and up) 
@media (min-width: 992px) { 
} 

// Extra large devices (large desktops, 1200px and up) 
@media (min-width: 1200px) { 

}

Hoffnung haben Sie eine bessere ansprechende Layout erhalten wird eines dieser Medien Abfrage mit .. Danke

Quelle

2017-12-04 06:16:29 Momin

Sie können auch zwei Haltepunkte von 'min-width' bis' max-width' für das Targeting einzelner Elemente verwenden, die wie folgt aussehen: @media (min-width: 576px) und (max-width: 767px) {...} ' – Momin

Wie kann ich mehrere Medienabfragen verwenden?

Antwort

Verwandte Themen