我用css做的网页,只要进行缩放,盒子就乱了,怎么让网页因缩放而变形?

发布网友发布时间：2022-04-24 20:10

共3个回答

热心网友时间：2023-10-09 12:04

@media screen 这个可以让你在不同的分辨率下显示不同的样式

举例

.abc{width:1200px;margin:0 auto}
@media screen and (max-width:1200px){
.abc{width:100%}
}

上面的代码，abc盒子的宽度是1200px，但是有时候浏览我们网页客户浏览器只有1024像素，所以我们设置@media screen，当浏览器max-width:1200px，最大宽度小于1200px时候，执行.abc{width:100%}，这个时候abc盒子的宽度就是1024像素

热心网友时间：2023-10-09 12:04

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0; margin: 0; font-size: 12px;}
ul,li{list-style: none;}
.div1{width: 100%;}
.div2{width: 30%; background: orange; height: 300px; float: left;}
.div3{width: 70%; background: green; height: 300px; float: left;}
</style>
</head>
<body>
<div class="div1">
<div class="div2">30%</div>
<div class="div3">70%</div>
</div>
</body>
</html>
把宽度设置成百分比就好。

热心网友时间：2023-10-09 12:04

横向用百分比写，不要用px