Fullpage js mediaqueries

Question

私はフルページjsを作成しています。私は5つのセクションを持っています、これらの5つのセクションは内容がいっぱいです。私は幅に基づいてメディアクエリを書いてきましたが、小さな高さのデバイスを取ると、コンテンツは次のセクションまで遅れるため、ユーザーはそれを見ることができません。

私が使用しているブレークポイントがあり、

@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) { 

私はそれに応じてメディアクエリを記述することができるように、各ブレークポイントの最大値と最小値の可能な高さを知っていただきたいと思います。ここで が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

アプローチは、実際には条件付きでHTML要素をレンダリングすることです自身ではなく、スタイルにしようみんなのためのDOM。ここで

は、デバイスがモバイルまたはデスクトップであるかどうかに応じて、DIVを表示/非表示するために使用できるトリックです：

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

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

とCSS：デバイスがデスクトップを持って

.hide-mobile { 
    display: none; 
} 

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

    .show-mobile { 
     display: block; 
    } 
} 

モバイル<div>は非表示になります。デバイスの最小幅が480ピクセルに低下すると、モバイルコンテンツを表示しながらデスクトップコンテンツが非表示になり、メディアクエリが実行されます。

私は、このアプローチが、ワンサイズのすべてのCSS手法を実行しようとすると、より強力であると信じています。