Media Query funktioniert nicht richtig

Ich habe versucht, Medienabfrage in einfachen HTML und CSS zu implementieren. Aber aus irgendwelchen seltsamen Gründen funktioniert es nicht. Ich habe es mit oder ohne 'Viewport' Meta-Tag, verschiedene Browser, mehrere Haltepunkte usw. versucht. Hintergrundfarbe Antworten, aber das Hauptproblem ist mit der Größe des Elements (speziell Breite). Die Größe ändert sich nicht (Antwort), wenn das Browserfenster verkleinert wird. Ich weiß nicht, was damit nicht stimmt. vermisse ich etwas? Es wäre eine große Hilfe, wenn mir jemand sagt, was die mögliche Ursache ist.Media Query funktioniert nicht richtig

html:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Media Query Practice_2</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" type="text/css" href="media_Query2.css"> 
     <link rel="icon" type="image/jpg" href="image/f1202536.jpg"> 

    </head> 

    <body> 
     <div class="wrapper"> 
      <div class="header"> 
       <h2 style="text-align:center;"> 
        Hello 
       </h2> 
      </div> 
      <div class="mncontentWrapper"> 
       <div class="content_1 gap"> 
        <p class="s"> 
         The Atlantic was always moody and September storms had blown up from nowhere so that the great grey rollers had smashed constantly against the cliffs round Cape <a href="#Early">Trafalgar</a>. Today, however, the sea has calm, with a soft north-westerley wind bringing up cloud that dropped a gauze veil long the coast.     
        </p> 
       </div> 
       <div class="content_2 gap"> 
        <ol> 
         <li>Mango</li> 
         <li>Berry</li> 
         <li>Jack fruit</li> 
         <li>Banana</li> 
         <li>Lychee</li> 
         <li>Grape</li> 
         <li>Apple</li> 
         <li>Pineapple</li> 
         <li>Coconut</li> 
         <li>Avocado</li> 

        </ol> 

       </div> 
       <div class="content_3"> 
        <p class="s"> 
         The Atlantic was always moody and September storms had blown up from nowhere so that the great grey rollers had smashed constantly against the cliffs round Cape <a href="#Early">Trafalgar</a>. Today, however, the sea has calm, with a soft north-westerley wind bringing up cloud that dropped a gauze veil long the coast.     
        </p> 
       </div> 
      </div> 
      <div class="footer"> 
       <h3 style="text-align:center;">Media Query</h3> 
      </div> 
     </div> 
    </body> 
</html>` 
css code:

* {margin: 0; padding: 0;}

.wrapper {

width:1200px; 
min-height:1000px; 
margin:0 auto;

}

.header {

background-image:; 
min-height:150px; 
background-color:lightgreen; 
width:; 
background-size:;

}

.mncontentWrapper {

min-height:800px; 
width:100%; 
padding-left:px;

}

.content_1 {

min-height:800px; 
width:380px; 
float:left; 
background-color:AntiqueWhite;

}

.content_2{ 

min-height:800px; 
width:380px; 
float:left; 
background-color:DarkCyan; 
margin-left:; 
} 

.content_2 ol{ 
    margin-left:30px; 
} 

.content_3{ 

min-height:800px; 
width:380px; 
float:left; 
background-color:Lavender; 
margin-left:;

}

.gap{ 

margin-right:30px; 
} 

.footer{ 

clear:both; 
min-height:50px; 
background-color:LightSteelBlue; 
} 

@media only screen and (min-width: 520px) and (max-width: 1199px){ 

    .content_1{ 

     width:31%; 

    } 

    .content_2{ 
     width:33%; 

    } 

    .content_3{ 
     width:31%; 
    } 

}

@media nur Bildschirm und (max-width: 519px) {

.content_1{ 

     width:100%; 
     margin:0; 
    } 

    .content_2{ 

     width:100%; 
     margin:0; 

    } 

    .content_3{ 
     width:100%; 

    } 

    .footer{ 

     width:100%; 
     clear:; 
    } 
}

Quelle

2016-08-07 Shafqat

Ist das nah an, was Sie nach?

Die HTML ist genau so, wie Sie gepostet haben. Das CSS ist das gleiche, außer dass ich max-width:100%; zur Klasse .wrapper, Zeile 5 des CSS hinzugefügt habe.

Ohne diese Änderung hat der .wrapper div eine fest codierte Breite von 1200px und skaliert daher nicht in schmale Ansichtsfenster.

Hoffe, das hilft!

Quelle

2016-08-09 03:56:10

Danke für Ihre Lösung. Ich habe es auch herausgefunden (max-width), aber ich habe dies mit der Wrapperbreite in 'px' und nicht in '%' gelöst. Dein Vorschlag hat mir wirklich geholfen. Obwohl ich jetzt ein Problem mit der Elementhöhe bezüglich der Medienabfrage habe :). Danke noch einmal – Shafqat

Media Query funktioniert nicht richtig

Antwort

Verwandte Themen