Wie kann ich diese Medienabfrage durchführen, um das Menü vertikal zu sehen?

Ich habe dieses kleine Icon-Menü mit Hilfe eines Tutorials erstellt und versuche es reaktionsfähig zu machen, aber es funktioniert nicht.Wie kann ich diese Medienabfrage durchführen, um das Menü vertikal zu sehen?

Wenn die Breite 400px ist, möchte ich das Menü vertikal sein.

body { 
 
    margin: 0px; 
 
} 
 

 
.cuadro { 
 
    width: 100%; 
 
    background-color: pink; 
 
    overflow: auto; 
 
} 
 

 
.cuadro a { 
 
    float: left; 
 
    text-align: center; 
 
    width: 20%; 
 
    padding: 12px 0; 
 
    transition: all 0.3s ease; 
 
    color: white; 
 
    font-size: 36px; 
 
} 
 

 
.cuadro a:hover { 
 
    background-color: green; 
 
} 
 

 
.active { 
 
    background-color: purple !important; 
 
} 
 

 
@media only screen and (max-width: 414px) { 
 
    body { 
 
    margin: 0px; 
 
    } 
 
    .cuadro { 
 
    position: fixed; 
 
    width: 414px; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 36px 
 
    } 
 
    .cuadro a { 
 
    background-color: pink; 
 
    display: block; 
 
    padding: 16px; 
 
    color: white; 
 
    } 
 
    .cuadro a:hover { 
 
    transition: all 0.3s ease; 
 
    background-color: green; 
 
    } 
 
    .active { 
 
    background-color: purple !important; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Title</title> 
 
    <meta charset="utf-8"> 
 
    <meta content="viewport" content="width=device-width initial-scale=1"> 
 
    <script src="https://use.fontawesome.com/ea180863a6.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="cuadro"> 
 
    <a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-spotify" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a> 
 
    </div> 
 
</body> 
 

 
</html>

Was mache ich falsch?

Quelle

2017-12-05 Olmedo Guzman

Sie sind fast gut, machen Sie einfach den Menüpunkt float:none und width:100% in der Medienabfrage. Sie können auch box-sizing:border-box hinzufügen zu vermeiden Überlaufproblem hat und Sie nicht über eine Breite für .cuadro innerhalb der Medienabfrage angeben müssen:

body { 
 
    margin: 0px; 
 
} 
 

 
.cuadro { 
 
    width: 100%; 
 
    background-color: pink; 
 
    overflow: auto; 
 
} 
 

 
.cuadro a { 
 
    float: left; 
 
    text-align: center; 
 
    width: 20%; 
 
    padding: 12px 0; 
 
    transition: all 0.3s ease; 
 
    color: white; 
 
    font-size: 36px; 
 
    box-sizing:border-box; 
 
} 
 

 
.cuadro a:hover { 
 
    background-color: green; 
 
} 
 

 
.active { 
 
    background-color: purple !important; 
 
} 
 

 
@media all and (max-width: 414px) { 
 
    .cuadro { 
 
    position: fixed; 
 
    width: 100%; 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 36px 
 
    } 
 
    .cuadro a { 
 
    background-color: pink; 
 
    display: block; 
 
    width:100%; 
 
    padding: 16px; 
 
    color: white; 
 
    float:none; 
 
    } 
 
    .cuadro a:hover { 
 
    transition: all 0.3s ease; 
 
    background-color: green; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <title>Title</title> 
 
    <meta charset="utf-8"> 
 
    <meta content="viewport" content="width=device-width initial-scale=1"> 
 
    <script src="https://use.fontawesome.com/ea180863a6.js"></script> 
 
    <style> 
 

 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="cuadro"> 
 
    <a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-spotify" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a> 
 
    </div> 
 

 
</body> 
 

 
</html>

Quelle

2017-12-05 14:08:18

Danke, ich liebe diese Social-Media-Website :) –

@OlmedoGuzman willkommen :) Ich auch Rektifikation hinzugefügt, Sie einen Blick haben kann;) –

es nicht in gchrome funktioniert. : s –

Es gibt viele Wiederholungen in Ihrem CSS ist. Es müssen keine Regeln doppelt deklariert werden. Eine Alternative zu float ist die Verwendung flexbox. Beachten Sie, dass Sie nur die Richtung des Containers für kleinere Bildschirme ändern müssen.

Good introduction to flexbox

Beispiel

ich entfernt haben ihre/ein paar Stile .. Lassen Sie mich wissen, wenn Sie Fragen haben.

body { 
 
    margin: 0; 
 
} 
 

 
.cuadro { 
 
    background-color: pink; 
 
    display: flex; 
 
} 
 

 
.cuadro a { 
 
    text-align: center; 
 
    flex: 1 0 20%; 
 
    transition: all 0.3s ease; 
 
    color: white; 
 
    font-size: 36px; 
 
    padding: 12px 0; 
 
} 
 

 
.cuadro a:not(.active):hover { 
 
    background-color: green; 
 
} 
 

 
.active { 
 
    background-color: purple; 
 
} 
 

 
@media only screen and (max-width: 414px) { 
 
    .cuadro { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    } 
 
}

<script src="https://use.fontawesome.com/ea180863a6.js"></script> 
 
<div class="cuadro"> 
 
    <a class="active" href="#"><i class="fa fa-skype" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-spotify" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-whatsapp" aria-hidden="true"></i></a> 
 
    <a href="#"><i class="fa fa-vk" aria-hidden="true"></i></a> 
 
</div>

Quelle

2017-12-05 14:27:33 sol

Danke, ich bin neu in diesem, ich werde versuchen zu vermeiden, den Code zu wiederholen! –

funktioniert es nicht in gchrome. –

Das obige Snippet funktioniert bei mir in Chrome ... was funktioniert nicht? – sol

Wie kann ich diese Medienabfrage durchführen, um das Menü vertikal zu sehen?

Antwort

Verwandte Themen