在响应式设计中，我们经常需要根据设备尺寸来隐藏或显示特定元素。这个需求在前端开发中非常常见，因此在本文中，我们将介绍如何使用 CSS 媒体查询和 JavaScript 来实现在特定尺寸以下隐藏 div 元素的方法。
使用 CSS 媒体查询
CSS 媒体查询是响应式设计的一个重要技术，它可以通过检测设备尺寸并应用不同的样式来实现页面布局的优化。我们可以利用媒体查询的功能来隐藏特定尺寸以下的 div 元素。
以下是一个示例代码：
------ ----------- ------ -
----------- -
-------- -----
-
-在上面的代码中，我们使用了 @media 规则，并设置了一个条件 (max-width: 768px)，它表示当设备宽度小于等于 768 像素时，下面的样式将被应用到 .hidden-div 元素上，即该元素将被隐藏起来。
使用 CSS 媒体查询可以让我们在不使用 JavaScript 的情况下实现在特定尺寸以下隐藏 div 元素的操作。但是，在某些情况下，我们可能需要动态地控制元素的可见性，这时候就需要使用 JavaScript。
使用 JavaScript 控制元素可见性
在 JavaScript 中，我们可以使用 window.innerWidth 属性获取当前设备的宽度，并根据需要来控制元素的可见性。以下是一个示例代码：
----- --------- - --------------------------------------
-------- -------------- -
-- ------------------ -- ---- -
----------------------- - -------
- ---- -
----------------------- - --------
-
-
--------------------------------- --------------在上面的代码中，我们首先使用 document.querySelector 获取了 .hidden-div 元素，并定义了一个名为 handleResize 的函数来处理窗口大小调整事件。当窗口大小小于等于 768 像素时，我们将隐藏 .hidden-div 元素，否则显示该元素。
最后，我们通过 window.addEventListener 将 handleResize 函数绑定到 resize 事件上，以便在窗口大小发生变化时及时更新元素的可见性。
总结
以上介绍了如何使用 CSS 媒体查询和 JavaScript 来实现在特定尺寸以下隐藏 div 元素的方法。使用 CSS 媒体查询可以让我们在不使用 JavaScript 的情况下快速地实现该功能，而使用 JavaScript 则可以动态地控制元素的可见性。在实际开发中，我们可以根据具体需求来选择合适的方法来实现响应式设计。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31526