html - 如何在断点之前忽略外部/父元素

Question

我想知道如何忽略这段代码中的 div 标签，直到达到一定的屏幕尺寸（767px），但仍然显示里面的所有内容。

<div class="parent">
    <h4 class"title">Title</h4>
    <ul>
        <li>Cities</li>
    </ul>
</div>

Answer 1

您需要使用 Javascript。

为什么不只删除元素的类？像这样：

var parentClass = 'parent';

if ($(window).width() >= 767) {
  var p = $('.parent');
  p.removeClass('parent');
} else {
  p.addClass('parent');
}

<div class="parent">
  <h4 class "title">Title</h4>
  <ul>
    <li>Cities</li>
  </ul>
</div>

Answer 2

我不确定你所说的忽略是什么意思，但仍然显示里面的所有内容，所以这可能不是你想要的。但是，我会使用 JQuery 事件检测屏幕大小和更改，并相应地调整显示。例如：

function ShowHideParent() {
    if($(window).width() >= 768 && $(window).height >= 480)
        $('.parent').show();
    else
        $('.parent').hide();
}

$(document).ready( function () {
    ShowHideParent();
});
$(window).resize( function () {
    ShowHideParent();
});

如果您详细说明您想要什么以及为什么，我们可能会找到更好的解决方案。我有一种感觉，您可能会将其用作小型显示器（例如移动设备上的显示器）的解决方法。如果是这种情况，那么您可能有兴趣查看诸如Foundation之类的 Web 前端框架。这些框架已经解决了适应各种屏幕尺寸的许多麻烦，并且可以帮助您清晰地显示您的内容，而无需求助于 hacky 变通办法。