Ich versuche eine Medienanfrage in meinem CSS doc zu tun, so etwas wie tun:CSS-Medienabfrage wird nicht funktionieren
@media screen and (max-device-width: 480px) { /*css here*/}
aber es wird nicht funktionieren, wenn ich es auf einem iPhone testen. Ich habe versucht, die Größen zu ändern und die Hoch/Querformat-Funktion zu verwenden, aber immer noch nichts. Was mache ich falsch?
Ich rufe immer meine, wenn ich das CSS im Kopf des HTML verknüpfen.
Ein Beispiel aus einer aktuellen Seite arbeite ich an:
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />
Dies wählt die CSS doc, die von Anfang an der Auswahl von Design statt geladen werden, nachdem das CSS-Dokument geladen wird (reduziert Anzahl der HTTP-Anforderungen)
Wenn Sie dies im CSS-Dokument selbst tun, sollten Sie generell max-device-width durch max-width ersetzen.
Sie fügen zusätzliche HTTP-Anforderungen hinzu, indem Sie die CSS-Dateien trennen. Sie können die beiden Dateien einfach kombinieren, es sei denn, es gibt einen guten Grund, sie zu spucken. – robooneus
Das funktionierte für mich, ich konnte es kopieren und nur das href-Attribut ändern –
Das ist eigentlich die schlechteste Art, mit Medienabfragen umzugehen. Jedes Gerät lädt * alle * Medienabfragen herunter, auch wenn sie die Anforderungen für Medienabfragen derzeit nicht erfüllen. – cimmanon
Verwendung "max-width" anstelle von "max-device-Breite" die pro Gerät fixiert ist.
Dies ist nicht wirklich relevant für Handheld-Geräte, bei denen die maximale Breite und die maximale Gerätebreite gleich sind. Es ist nur für den Desktop wichtig, wo der Browser nicht maximiert werden muss. – cimmanon
Das hat mir geholfen, danke. Ich habe in einem Browser gesucht. Ich sehe nicht, warum Sie es stattdessen nicht verwenden würden, ich meine, eine Desktop-Oberfläche auf einem geschrumpften Desktop-Bildschirm zu verwenden, scheint nicht effizient zu sein, wenn Sie stattdessen die maximale Breite für beide verwenden können. – Jackie
Ich bin mir nicht sicher, aber ich denke, die max-device-width eines iPhone ist 640px. Versuche es.
@media only screen and (min-width : 480px) {
}
Es scheint in Android und iPhone gut zu funktionieren.
Dies ist eine
Medien Abfrage css Proben/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
your css here
}
/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
your css here
}
/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 480px) {
your css here
}
schwer zu verstehen, wie Sie die den Fehler, die Menschen es tun, indem nicht das Hinzufügen dieser Meta-Daten nicht zur Verfügung gestellt haben code..but
<meta name="viewport" content="width=device-width, initial-scale=1">
überprüfen Sie, ob Sie
<meta name="viewport" content="width=device-width, initial-scale=1.0">
im Kopf Ihres Dokuments haben
Viel Glück
Dies ist wichtig. Denn ohne Viewport-Tag funktionieren Medienabfragen überhaupt nicht. – user31782
Danke lol. Ich weiß nicht, wie ich das vermisst habe. –
können Sie max-width auch verwenden, versuchen Sie mit ihm @media Bildschirm und (max-width: 250px) – NaYaN
Versuchen Sie es zu 'max-width' Schalt: http://jsfiddle.net/ z7pN9/ –