2016-12-23 11 views
0

I Medienanfragen arbeiten perfekt auf dem zweiten HTML-Seite mit diesem CodeÄrger mit Medienanfragen, passiert nichts

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px) { 
.snebild img {width: 50%; max-width: 50%; right: 2%;} 
.title {margin-left: 4%; position: absolute; top: 10%;} 
} 

Aber auf meiner zweiten Seite im Versuch, die Schriftgröße zu ändern, wurde so auf niedrigeren Auflösungen gut aussieht, sondern Verwenden Sie den gleichen Code nur zu korrigieren, Klasse und p-Element, aber nichts funktioniert.

@media only screen and (min-device-width: 200px) and (max-device-width: 1099px) { 
.introus p {font-size: 8px;} 
} 

Dies ist die HTML

<div class="introus"> 
      <h2>Main Title</h2> 

      <h4>Second title</h4> 

      <p>Text to change size on when using lower resolution such as Iphones.</p> 
     </div> 
+0

Was mit der Verwendung der zweiten Seite oben ist.? – Riddler

+0

Wenn alles andere gleich ist, gibt es keinen Grund, warum der zweite Codeblock nicht funktioniert, wenn der erste Codeblock funktioniert, also entweder (1) Sie haben andere CSS, die stören, aber nicht in der Frage oder (2) Sie erscheinen treffen eine minimale Schriftgröße. – Quentin

+0

Was meinst du mit "meine zweite Seite"? Verwendet diese Seite ein anderes CSS-Blatt? Wählen Sie die Seite auch in CSS aus, so dass die zweite von Ihnen erwähnte Medienregel nur darauf zutrifft? Verwenden Sie auch (max-width: #px) 'anstelle von' (max-device-width: #px) '- Erklärung hier> http://stackoverflow.com/questions/18500836/should-i-use-max- Device-width-or-max-width –

Antwort

-1

Ich nehme an, Sie es auf einem Desktop-Gerät testen und nicht auf einem mobilen Gerät. Versuchen Sie, min-device-width zu min-width zu ändern, die funktionieren sollten.

Korrigieren Sie mich, wenn ich falsch liege.

+0

Bereits versucht, dass, bevor Sie hier posten, die Änderung auf Min-Breite nicht funktioniert. – Peterssoen

-1

sollten Sie min-width anstelle von min-device-width weil der Hauptunterschied zwischen Breite und geräte Breite, dass die Gerätebreiten der Vorrichtung das Layout-Ansichtsfenster tun, ist nicht immer übereinstimmen.

zu ändern, die den Code-Parameter funktioniert

@media only screen and (min-width: 200px) and (max-width: 1099px) { 
 
.introus p {font-size: 8px;} 
 
}
<div class="introus"> 
 
      <h2>Main Title</h2> 
 

 
      <h4>Second title</h4> 
 

 
      <p>Text to change size on when using lower resolution such as Iphones.</p> 
 
     </div>

+0

Das OP sagte, dass die gleichen Medienabfrageregeln auf einer anderen Seite funktionieren. – Quentin