Fullpage js mediaqueries

Question

Ich erstelle eine ganze Seite js. Ich habe 5 Abschnitte, diese 5 Abschnitte sind voller Inhalt. Ich habe die Medienabfrage basierend auf der Breite geschrieben, aber wenn ich einige Geräte mit geringer Höhe nehme, bleibt der Inhalt im nächsten Abschnitt, so dass der Benutzer ihn nicht sehen kann. entsprechend

Die Stützpunkte Ich verwende sind,

@media only screen and (min-width : 0px) { 
@media only screen and (min-width : 320px) { 
@media only screen and (min-width : 480px) { 
@media only screen and (min-width : 768px) { 
@media only screen and (min-width : 992px) { 
@media only screen and (min-width : 1200px) { 
@media only screen and (min-width : 1600px) { 

Ich möchte maximal und minimal mögliche Höhe für jeden Unterbrechungspunkt kennen, so dass ich die Abfrage Medien schreiben kann.

bearbeiten ** Hier ist der HTML,

<div id="fullpage"> 
<div class="section" id="section0"> 
    <div id="bgslider-text" class="col-xs-12 col-sm-12 col-lg-12"> 
     <h2 class="animated fadeInRightBig option"> 
      Testing aa 
     </h2> 
     <h2 class="animated fadeInRight options"> 
      TEst 
     </h2> 
     <h3 class="animated fadeInRight opt"> 
      Animated text 
     </h3> 
    </div> 
</div> 
<div class="section" id="section1"> 
</div> 
</div> 

Answer 1

Der Ansatz, den ich nehmen möchte, wenn sie mit Handy im Vergleich zu Desktop-Ansichten zu tun ist, machen, tatsächlich bedingt die HTML-Elemente sich anstatt zu versuchen, die zum ursprünglichen Stil DOM für alle.

Hier ist ein Trick, den Sie je nach einem div zu zeigen, verwenden können/verstecken ob das Gerät mobil oder Desktop:

<div class="hide-desktop> 
    Desktop content goes here... 
</div> 

<div class="hide-mobile show-mobile"> 
    Mobile content goes here... 
</div> 

Und die CSS:

.hide-mobile { 
    display: none; 
} 

@media only screen and (min-width : 480px) { 
    .hide-desktop { 
     display: none; 
    } 

    .show-mobile { 
     display: block; 
    } 
} 

Wenn das Gerät Desktop hat Auflösung wird das Handy <div> ausgeblendet werden. Wenn die Mindestbreite des Geräts auf 480 Pixel fällt, wird die Medienabfrage aktiviert und der Desktop-Inhalt wird ausgeblendet, während der mobile Inhalt angezeigt wird.

Ich glaube, dass dieser Ansatz leistungsfähiger ist als der Versuch, einen einheitlichen CSS-Ansatz zu finden.