统计页面左右+上下自适应布局
发布人：shili8
发布时间：2024-12-08 10:12
阅读次数：0
**统计页面左右+上下自适应布局**
在网页设计中，左右+上下自适应布局是非常常见的一种布局方式。这种布局方式可以让页面内容在不同屏幕尺寸下自动调整位置，从而提供更好的用户体验。
**HTML结构**
首先，我们需要定义 HTML 结构。我们将页面内容分为左右两部分，分别放置在两个 `div` 元素中。
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>统计页面左右+上下自适应布局</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 左部分 --> <div class="left-part"> <!-- 内容放置在这里 --> <h2>左侧内容</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p> </div> <!-- 右部分 --> <div class="right-part"> <!-- 内容放置在这里 --> <h2>右侧内容</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p> </div> <script src="script.js"></script> </body> </html>
**CSS样式**
接下来，我们需要定义 CSS 样式来实现左右+上下自适应布局。我们使用 Flexbox 布局方式来实现这一点。
css/* styles.css */
body {
margin:0;
padding:0;
}
.container {
display: flex;
flex-direction: column;
height:100vh;
}
.left-part, .right-part {
flex-basis:50%;
padding:20px;
box-sizing: border-box;
}
.left-part {
background-color: #f7f7f7;
}
.right-part {
background-color: #e5e5e5;
}
**JavaScript代码**
最后，我们需要在 JavaScript 中实现页面内容的自适应布局。我们使用 ResizeObserver API 来监听窗口大小变化，并根据窗口大小调整页面内容的位置。
javascript// script.jsconst container = document.querySelector('.container');
const leftPart = document.querySelector('.left-part');
const rightPart = document.querySelector('.right-part');
const resizeObserver = new ResizeObserver((entries) => {
const { width, height } = entries[0].contentRect;
const leftWidth = width /2 -20; // 左部分宽度 const rightWidth = width /2 +20; // 右部分宽度 leftPart.style.width = `${leftWidth}px`;
rightPart.style.width = `${rightWidth}px`;
if (height < 500) {
container.classList.add('small-screen');
} else {
container.classList.remove('small-screen');
}
});
resizeObserver.observe(container);
**总结**
在本文中，我们实现了一个左右+上下自适应布局的页面。我们使用 Flexbox 布局方式来实现左右部分的自适应布局，并使用 ResizeObserver API 来监听窗口大小变化，根据窗口大小调整页面内容的位置。
这个例子可以作为网页设计中的一个参考案例，帮助开发者更好地理解如何实现左右+上下自适应布局。
粤公网安备 44011102002787号