Verstecken Sie ein Navigationselement, während auf dem desktop, zeigen Sie nur mobile

Auf meiner Seite (test online unter visal.de/trb/) versuche ich momentan zu verbergen element und zeigen Sie anderen, wenn der Nutzer auf mobile. Das blockierte element ist die top-navigation (Glossar & FAQ und Intern), die element-ich möchte nur zeigen, um mobile Benutzer ist das element "Weiterführendes".

Ich habe versucht, fast alles, wie diese Medien-Abfrage:

/* topfix */    @media (max-width: 479px) {
#header nav ul.hide-top, #header .hide-top {
    display: block;
    visibility: hidden;
}}   @media (max-width: 600px) {
/* Header */
#header nav ul.hide-top li {
    display: none;
    visibility: hidden;
}

#header nav ul.hide-top li .phone {
    display: block;
    visibility: hidden;
}

aber nichts scheint wirklich zu funktionieren. Ich denke, da der code mehr als einmal sagt, dass es angezeigt werden soll, wenn, aber am Ende sagen, dass es sollte nicht gezeigt werden. Vielleicht ist das, was die auftretenden Fehler. Dass jemand zu wissen, ein Update oder was ich falsch gemacht habe?

InformationsquelleAutor Terba | 2015-03-22
  1. 3

    Einem media-query mit max-width teilt dem browser mit, um die Stile angewendet werden, wenn der browser verkleinert, um die Größe. Min-width ist das Gegenteil. Es sagt dem browser, um die Stile angewendet werden, wenn der browser wächst zu Größe.

    In der zweiten Medien-Abfrage, die Sie aufgeführt, die die erste, die aktiviert wird, wenn das schrumpfen Ihrem browser, Sie sagen es display: none die verstecken das element und entfernen Sie den Speicherplatz, den er belegt. Sie sind auch visibility: hidden die nur verbergen, das element aber nicht entfernt den Platz, den es einnimmt. Mit Sichtbarkeit ist hier überflüssig.

    In der ersten media query, die die zweite ist eine, die aktiviert wird, wenn das schrumpfen Ihrem browser, Sie sagen es display: block was wird rückgängig gemacht, die früheren display: none, aber Sie sind immer noch auch die Einstellung der visibility: hidden, anstatt das zu visibility: visible, so dass das element immer noch nicht angezeigt.

    Hier ist ein einfaches Beispiel für eine mobile-first-Ansatz eher als desktop-zunächst wie dein Beispiel, um zu zeigen /verbergen der a-Klasse.

    .my-mobile-image {
  display: none; /* This is how it looks on mobile */
}

@media (min-width: 600px) {
  .my-mobile-image {
    display: block; /* This is how it looks on desktop */
  }
}
    • Aber es zu verändern mobile first statt desktop first erfordern würde, zu ändern, über 40 verschiedene css-Klassen (everytime I-test). Gibt es keine andere Möglichkeit zu arbeiten, um es aus der desktop-first-Ansatz?
    • Yup! Ändern min-width zu max-width und tauschen Sie die display Eigenschaften um. Sie sollten gut sein.
    • Es scheint zu funktionieren, aber es scheint auch zu ignorieren, mein display:none und verwenden nur die Sichtbarkeit. Dies führt zu besetzten Raum. Ein clear:both; löscht den Raum, sondern auch löscht meine max Höhe für den header-Feld. Abhilfe mit diesem?
    • Okay, das zurücksetzen der Höhe nach zu 100% fest leicht behoben das problem. Vielen Dank für die Hilfe.
    InformationsquelleAutor Dustin
  2. 1

    sind Sie nicht mit den media queries in der richtigen Weise . sollten Sie beschreiben die min-und max-Länge des Bildschirms

    für mobile Bildschirm 

     @media screen and (min-width:299px) and (max-width:479px) {
   display: block;
   visibility: hidden;
 }

    andere Bildschirmauflösung

     @media screen and (min-width:480px) and (max-width:600px) {
   /* Header */
   #header nav ul.hide-top li {
    display: none;
    visibility: hidden;
   }
   #header nav ul.hide-top li .phone {
    display: block;
    visibility: hidden;
   }
 }

    ich hoffe, es wird nicht testen Sie es jetzt im moment

    • Dein Ansatz geholfen, meine Art... Es funktioniert jetzt, aber ich habe das problem jetzt ist, dass die display:none; ist immer noch die Sperrung des Bereichs, während dessen überhaupt nicht sichtbar. Ich habe sowohl display:none; und visibility:hidden;. Abhilfe? // ein clear:both; löscht den Raum, sondern lässt den nav-wrapper viel größer, whyever. //Edit: ich Sehe jetzt, dass die css scheinen zu ignorieren, die display:none; und benutzt nur die visibility:hidden;
    InformationsquelleAutor Daniel
Schreibe einen Kommentar