0
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:;
}
}
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