HTML如何让内容跟随浏览器
（图片来源网络，侵删）
使用百分比布局
在HTML中，我们可以使用百分比来设置元素的宽度或高度，使其根据浏览器窗口的大小自动调整。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 100%;
backgroundcolor: lightblue;
}
.content {
width: 80%;
margin: auto;
backgroundcolor: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>这里是内容，它会随着浏览器窗口的大小变化而自动调整。</p>
</div>
</div>
</body>
</html>
使用媒体查询
媒体查询是CSS3的一个特性，它允许我们根据设备的特性（如屏幕宽度）来应用不同的样式。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
backgroundcolor: lightblue;
}
.content {
backgroundcolor: white;
padding: 20px;
}
@media screen and (maxwidth: 600px) {
.content {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>当浏览器窗口的宽度小于600px时，内容的宽度将自动调整为100%。</p>
</div>
</div>
</body>
</html>
使用flex布局
Flex布局是一种现代的布局方式，它可以使子元素根据父元素的大小自动调整。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justifycontent: center;
backgroundcolor: lightblue;
}
.content {
backgroundcolor: white;
padding: 20px;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>使用flex布局，内容会自动居中，并且随着浏览器窗口的大小变化而自动调整。</p>
</div>
</div>
</body>
</html>
以上就是三种让HTML内容跟随浏览器窗口大小变化的方法。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/400802.html
微信扫一扫