Ausprobieren von Medienabfragen und nicht zur Arbeit

Ich bin ziemlich neu in CSS und probiere Medienabfragen aus. Ich habe den Rat vieler Leute über andere Beiträge hier auf Stackoverflow und anderen Websites befolgt, kann sie aber nicht zur Arbeit bringen. Ich versuche einfach die Farbe der Boxen zu ändern, wenn der Bildschirm eine bestimmte Breite unterschreitet.
Hier ist mein Code:Ausprobieren von Medienabfragen und nicht zur Arbeit

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" name"viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> 
    </head> 
    <body> 
    <span class="boxes" id="b1">Box 1</span> 
    <span class="boxes" id="b2">Box 2</span> 
    <span class="boxes" id="b3">Box 3</span> 
    <span class="boxes" id="b4">Box 4</span> 
    <span class="boxes" id="b5">Box 5</span> 
    </body> 
</html>

CSS-Datei:

.boxes { 
    height: 200px; 
    width: 200px; 
    color: #FFF; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 80px; 
    margin: 20px; 
    top: 100px; 
    position: relative; 
    background-color: red; 
} 

@media only screen and (max-width:600px) { 
    .boxes { 
    background-color: #000000; 
    } 
}

ich versucht habe:
* @media screenohne das only Wort in der CSS-Datei.
* Nein media="screen" im HTML-Link-Tag.
* max-device-width in der CSS-Datei.
* media="only screen and (max-device-width: 600px)" im HTML-Link-Tag.

Nichts, was ich versucht habe, hat funktioniert, was fehlt mir?

Quelle

2016-07-05 yasgreen

Haben Sie 'min-width' versucht? Vielleicht sogar die '! Wichtig 'Flagge –

nur getestet und es funktioniert, ist Ihr Problem in Ihrer CSS-Datei überschreiben diese Eigenschaft – dippas

@WesFoster rate nicht zu verwenden'! Wichtig' – dippas

Ihnen fehlt das Gleichheitszeichen in Ihrem Viewport-Meta-Tag. Ihr Code funktioniert, wenn Sie ihn platzieren. name = "Ansichtsfenster"

Quelle

2016-07-05 22:01:31 Vcasso

nicht das Problem;) http: // serpa. eusou.com/SO/bts.html – dippas

In Ihrem Beispiel haben Sie das Meta-Ansichtsfenster vollständig entfernt. Sie sollten es mit korrekter Syntax wieder einfügen und es wird funktionieren! – Vcasso

Ich nahm es heraus, um es zu zeigen, dass es ohne das Meta-Tag funktioniert – dippas

Vergewissern Sie sich, um den <meta> Tag zu ändern:

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

Sie versuchen, die Hintergrundfarbe spezifizieren könnte:

@media screen and (min-width:601px) { 
.boxes { 
    background-color: red; 
    } 
}

Wieder arbeitet Ihr für mich wie es ist, aber vielleicht, indem Sie die Hintergrundfarbe von Rot nur über 601px angeben, wird funktionieren.

.boxes { 
 
    display: inline-block; /* Added this so they don't overlap */ 
 
    height: 200px; 
 
    width: 200px; 
 
    color: #FFF; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    padding: 80px; 
 
    margin: 20px; 
 
    top: 100px; 
 
    position: relative; 
 
    
 
} 
 
@media screen and (min-width:601px) { 
 
.boxes { 
 
    background-color: red; 
 
    } 
 
} 
 
@media screen and (max-width:600px) { 
 
    .boxes { 
 
    background-color: #000000; 
 
    } 
 
}

<span class="boxes" id="b1">Box 1</span> 
 
<span class="boxes" id="b2">Box 2</span> 
 
<span class="boxes" id="b3">Box 3</span> 
 
<span class="boxes" id="b4">Box 4</span> 
 
<span class="boxes" id="b5">Box 5</span>

Quelle

2016-07-05 22:30:27

Meta-Tag ist nicht das Problem hier http://serpa.eusou.com/SO/bts.html, und diese zusätzliche Medienabfrage, die Sie getestet haben, wird nicht viel tun – dippas

Was ist das Problem dann?Gibt es ein bestimmtes Szenario, in dem die Boxen nicht die Farbe wechseln? Ich habe keine Probleme beim Testen, daher ist es schwer zu verstehen, was das Problem ist. –

Ausprobieren von Medienabfragen und nicht zur Arbeit

Antwort

Verwandte Themen