Erstellen einer Website responsive mit verschiedenen Abschnitten von HTML (sowie Medienabfragen)

Ich mache ein Online-Portfolio, und mein Menü, das aus 3 Flip-Karten-Bildern besteht, muss in der Lage sein, auf Touchscreen-Geräten zu arbeiten. Da ich nichts am Desktop-Menü ändern möchte, habe ich mir überlegt, ein komplett neues Menü für mobile Geräte zu erstellen, was bedeuten würde, einen Teil meines HTML-Codes zu verwerfen und einen neuen Abschnitt einzufügen.Erstellen einer Website responsive mit verschiedenen Abschnitten von HTML (sowie Medienabfragen)

Ich bin nicht sicher, wie das am besten funktioniert - zum Beispiel ist es möglich, verschiedene Indexseiten für verschiedene Gerätegrößen zu erstellen? Jedes Mal, wenn ich die Antwort versuche und suche, finde ich nur Ergebnisse über CSS-Medienabfragen, die ich ebenfalls verwende, aber in diesem Fall ist es der Inhalt, den ich ändern möchte. Irgendwelche Vorschläge? Danke vielmals!

Erin.

Quelle

2016-07-28 Erin

Bitte zeigen Sie uns, was Sie bisher versucht haben. –

Als Alternative zu Bootstrap eignet sich das CSS3-Modul "flexbox" sehr gut zum Gestalten dynamischer Präsentationen. (Wahrscheinlich sogar mächtiger als Bootstrap). In Ihrer Frage können Sie ein Bild einfügen, das zeigt, wie das Flipcard-Menü aussieht und dann ein zweites Bild, das zeigt, wie Sie sich das Touchscreen-Menü vorstellen? – Rounin

Verwenden Sie bootstrap. Es ist ein wenig Mühe, dies zu lernen, aber es wird ein Vorteil für das Leben sein. Sie werden viel Konstrukt darin bekommen, damit jede Webseite gleichzeitig auf allen Bildschirmen funktioniert.

Edit:

Wenn Sie nicht Bootstrap folgende Medien fragt

@media screen and (max-width: 480px) { 
    .in-small-devices { 
     display: block; 
    } 

    .in-large-devices{ 
     display: none 
    } 
} 

@media screen and (min-width: 480px) { 
    .in-small-devices { 
     display: none; 
    } 

    .in-large-devices{ 
     display: block 
    } 
}

Dann wendet es auf den beiden divs, die Sie alternativ zeigen wollen

<div class="in-small-devices"></div> 
<div class="in-large-devices"></div>

Quelle

2016-07-28 22:07:27

Toller Tipp, danke! Ich werde definitiv Bootstrap für mein nächstes Projekt in Betracht ziehen (habe es in der Vergangenheit sparsam benutzt), aber in der Zwischenzeit hoffe ich, eine reine HTML-Antwort zu finden, da ich bereits viel Arbeit darin investiert habe ... – Erin

Sie können Verwenden Sie verschiedene Indexdateien, wenn Sie ein beliebiges MVC-Framework verwenden. Im Controller können Sie überprüfen, von welchem Browser Sie eine Anfrage erhalten, und dann die unterschiedliche Ansicht für verschiedene Browser rendern. Ich habe meine Antwort für eine einfache Medienabfrage-Lösung bearbeitet. Dies könnte auch in Ihrem Fall funktionieren. –

Ooh ja ich hatte nicht an die Anzeige gedacht: keine Eigenschaft und die Verwendung beider Divs in der gleichen HTML-Datei, das könnte ganz gut funktionieren, wird euch wissen lassen, vielen Dank! – Erin

verwenden verwenden wollen mit Bootstrap Grid-Klassen können Sie die Breite eines div auf verschiedenen Bildschirmgrößen (xs, sm, ...) definieren. Zum Beispiel können Sie ganze Codeblöcke ausblenden und andere HTML anzeigen, wenn sie auf bestimmten Bildschirmgrößen sind.

<div class="visible-lg"></div> (visible on large screens) 
<div class="hidden-xs"></div> (hidden on extra-small screens) 

<div class="col-sm-6 col-lg-3"></div>

(bei Standard-12-Einheiten einer Reihe sind. Diese div wird 6 Einheiten Platz auf kleinen Bildschirmen nehmen, aber nur 3 auf großen Bildschirmen. Dies bedeutet 2 divs fit in der Reihe auf kleinen Bildschirmen, aber 4TE auf große Bildschirme)

einen genaueren Blick: https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system http://getbootstrap.com/css/#grid

Quelle

2016-07-28 22:18:58

Erstellen einer Website responsive mit verschiedenen Abschnitten von HTML (sowie Medienabfragen)

Antwort

Verwandte Themen