Media Queries Responsive Design
@media only screen and (min-width: 600px) {
nav ul{
transform: translateY(0);
box-shadow: 0 0 5px rgba(0,0,0, .7);
transition: all .5s;
}
nav li{
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul{
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label{display: block;}
nav input[type="checkbox"]:checked + ul li:nth-child(1){
background: #777;
color: #fff;
}
#css-toggle-menu{
float:right;
margin: 10px;
}
}
/*Desktop*/
@media (min-width: 961px) and (max-width: 2000px) {
nav{
float:left;
color:white;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration:none;
}
a:hover {
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
}<header>
<nav>
<input type="checkbox" id="css-toggle-menu" name="css-toggle-menu">
<ul class="main">
<li><a class="space" href="">Home</a></li>
<li><a class="space" href="">Programs</a></li>
<li><a class="space" href="">Assignments</a></li>
<li><a class="space" href="">Enroll</a></li>
<li><a class="space" href="">Contact</a></li>
</ul>
<label for="css-toggle-menu" id="css-toggle-menu"></label>
</nav>
</header>Mit Medienanfragen dachte ich, dass, wenn man sie in Form von Tabletten und Desktop einrichten, sobald Sie diese Parameter erreichen, dass das andere Layout wie Tablette weggehen würde, wenn Sie wurden Schalen zum Desktop. Allerdings stoße ich auf ein Problem, bei dem ich, wenn ich vom Tablet-Modus auf den Desktop umschalte, meine Navigationsleiste von meinem Mobil- und Tablet-Bildschirm auf meinen Desktop bringe. Auf meinem Desktop möchte ich nur ein horizontales Navigationsgerät oben auf der Seite. Ich habe kein CSS in die Navi-Leiste gelegt, so dass ich nicht weiß, wie ich das im Desktop überschreiben soll. Ich könnte wirklich etwas Hilfe beim Verstehen dieses Medienabfrageproblems verwenden. Vielen Dank! Hier
ist ein JsFiddle: https://jsfiddle.net/ma28j5kd/ (Ich weiß, dass die Geige ist nicht schön, so entschuldige ich mich im Voraus)
HTML:
<header>
<nav>
<input type="checkbox" id="css-toggle-menu" name="css-toggle-menu">
<ul class="main">
<li><a class="space" href="">Home</a></li>
<li><a class="space" href="">Programs</a></li>
<li><a class="space" href="">Assignments</a></li>
<li><a class="space" href="">Enroll</a></li>
<li><a class="space" href="">Contact</a></li>
</ul>
<label for="css-toggle-menu" id="css-toggle-menu"></label>
</nav>
</header>
CSS:
Tablet:
@media only screen and (min-width: 600px) {
nav ul{
transform: translateY(0);
box-shadow: 0 0 5px rgba(0,0,0, .7);
transition: all .5s;
}
nav li{
flex: none;
width: 100%;
border-bottom: solid 1px #777;
}
nav input[type="checkbox"]:checked + ul{
transform: translateY(-100%);
width: 100%;
background: #999;
transition: all .5s;
}
nav label{display: block;}
nav input[type="checkbox"]:checked + ul li:nth-child(1){
background: #777;
color: #fff;
}
#css-toggle-menu{
float:right;
margin: 10px;
}
}
Desktop:
@media (min-width: 961px) and (max-width: 2000px) {
nav{
float:left;
color:white;
}
nav ul li.active a {
background-color: none;
color: white;
text-decoration:none;
}
a:hover {
color:black;
background-color:#00E3FF;
}
nav ul li a:visited {
color:black;
text-decoration:none;
}
}
Sie sollten sich ein [MCVE] in der Frage liefern. In dem Code, den Sie in die Frage eingegeben haben, sind keine Medienfragen enthalten. Das Beispiel sieht auch nicht sehr minimal aus. Sie könnten es wahrscheinlich in jeder Medienabfrage durch einen Regelsatz ersetzen, um zu zeigen, was Sie erreichen möchten. Verwenden Sie auch [die integrierte Funktionalität für Live-Demos] (https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). – Quentin
Sie haben missverstanden, wie '@ media'-Queries funktionieren. '@ media'-Abfragen sollten die zuvor im CSS festgelegten Regeln überschreiben - wenn Sie möchten, dass sie eine vollständige Übernahme durchführen, müssen Sie sowohl min-width als auch max-width angeben, wenn sie funktionieren sollten, aber das ist nicht ihre Absicht. Sie sollten niemals eine Medienabfrage auf "Desktop" anwenden - Desktop ist Ihr Ausgangspunkt, was Sie zuerst erstellen, dann erstellen Sie Haltepunkte für kleinere Bildschirme, wenn sich Inhalte auf Ihrem Bildschirm überlappen oder zu klein für gutes Layout und Benutzerfreundlichkeit werden . Sie müssen also von Anfang an beginnen. – junkfoodjunkie