html自适应窗口大小
时间: 2023-08-10 18:56:38 浏览: 52
要实现HTML页面自适应窗口大小,可以使用CSS的响应式布局来完成。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* 设置页面主体样式 */
body {
margin: 0;
padding: 0;
}
/* 设置响应式布局 */
.container {
width: 100%; /* 设置容器宽度为100% */
max-width: 1200px; /* 设置最大宽度为1200px */
margin: 0 auto; /* 居中显示 */
padding: 20px;
}
/* 设置内容样式 */
.content {
width: 100%;
height: 200px;
background-color: #f1f1f1;
}
/* 设置媒体查询 */
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于等于768px时的样式 */
.container {
padding: 10px;
}
.content {
height: 100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
</html>
```
在上述示例中,使用了CSS的`@media`规则来设置媒体查询,根据屏幕宽度的不同应用不同的样式。当屏幕宽度小于等于768px时,容器的内边距和内容的高度会发生变化,实现了页面的自适应窗口大小效果。你可以根据需要调整容器和内容的样式来适应你的页面布局。