全页js媒体

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的方法更强大。