万奢网-名品奢网名表回收网 › 首页 › 查看评论

JavaScript 程序中如何使用 media 实现响应式布局？

评论 (1)|发表评论

奢侈品回收 2023-4-19 08:17 引用

在 JavaScript 程序中，您可以使用媒体查询 (media query) 和事件监听器结合实现响应式布局。媒体查询允许您根据设备的特征（例如浏览器窗口大小）应用不同的 CSS 样式。以下是一个简单的示例，展示了如何使用 JavaScript 和媒体查询实现响应式布局：1.首先，在 HTML 文件中添加一些元素和内联样式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Layout with JavaScript</title></head><body> <div id="container" style="width: 100%; background-color: green;"> <p>Resize the browser window to see the effect.</p> </div>
<script src="script.js"></script></body></html>2.在同一目录下创建一个名为 "script.js" 的 JavaScript 文件。在这个文件中，将添加响应式布局逻辑：// 获取要修改样式的元素const container = document.getElementById('container');
// 定义媒体查询const mediaQuery = window.matchMedia('(max-width: 600px)');
// 监听媒体查询变化mediaQuery.addListener(handleWidthChange);
// 在页面加载时调用 handleWidthChange 函数handleWidthChange(mediaQuery);
// 定义处理函数function handleWidthChange(mediaQuery) { if (mediaQuery.matches) { // 当窗口宽度小于或等于 600px 时应用的样式 container.style.backgroundColor = 'blue'; } else { // 当窗口宽度大于 600px 时应用的样式 container.style.backgroundColor = 'green'; }}
在此示例中，首先获取要修改样式的元素（container），然后定义一个媒体查询（mediaQuery），以便在窗口宽度小于或等于 600px 时应用不同的样式。我添加了一个事件监听器（mediaQuery.addListener(handleWidthChange)），以便在媒体查询条件发生变化时调用 handleWidthChange 函数。handleWidthChange 函数根据媒体查询的条件修改 container 元素的背景颜色。在这个示例中，当浏览器窗口宽度小于或等于 600px 时，容器的背景颜色将更改为蓝色；否则，背景颜色为绿色。您可以根据需要修改此示例以适应您的项目需求。例如，您可以更改媒体查询条件、添加更多元素和样式，甚至根据需要使用 JavaScript 修改 DOM 结构。