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