如何使div的位置随浏览器窗口缩放大小比例变化？
展开全部
随窗口变化大小且变换样式或位置可以使用媒体查询, 对窗口的大小进行响应式配置
※ 注: 以上是举例, 并未参考任何设备尺寸!
2. 如果只是简单的变化 div 或其他 element 的大小可以使用响应式单位, 如: rem ( 根据 HTML 的 font-size 大小来定义宽度 )、em ( 根据父级 font-size 大小来定义宽度 )、vw ( 根据设备可是窗口的宽度来定义的 )、vh ( 根据可视窗口的高度来定的 )、vmax ( 根据可视窗口的大小对比, 采用最大的一方来作为尺寸依据 )、vmin ( 根据可视窗口的大小对比, 采用最大的一方来作为尺寸依据 )、% ( 根据父盒子的宽度作为单位 )
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2022-10-09 · 百度认证:云南新华电脑职业培训学校官方账号
云南新华电脑学校
云南新华电脑学校是经云南省教育厅批准成立的省（部）级重点计算机专业学校，采用三元化管理模式，教学设备先进，师资雄厚学生毕业即就业，学院引进了电商企业入驻，创建心为电商创业园区，实现在校即创业
向TA提问
关注
![]()
展开全部
1.新建一个HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
</body>
</html>
2.使用css初始化body和div的内外边距
body,div{margin: 0;padding: 0;}
3.创建一个div，主要用于包围内部的div，设置其class属性为con。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<div class="con">
</div>
</body>
</html>
4.使用css设置class为con的div宽度为100%，即占满整个网页
.con{width: 100%;margin: 0 auto;}
5.在类名为con的div内，创建三个div， 类名分别为con1，con2，con3。
注：为了实现div随网页的大小变化而变化，内部div宽度加起来总的宽度必须为100%。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<div class="con">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>
</body>
</html>
css样式
.con1{
width:20%
}
.con2{
width:30%
}
.con3{
width:50%
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
</body>
</html>
2.使用css初始化body和div的内外边距
body,div{margin: 0;padding: 0;}
3.创建一个div，主要用于包围内部的div，设置其class属性为con。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<div class="con">
</div>
</body>
</html>
4.使用css设置class为con的div宽度为100%，即占满整个网页
.con{width: 100%;margin: 0 auto;}
5.在类名为con的div内，创建三个div， 类名分别为con1，con2，con3。
注：为了实现div随网页的大小变化而变化，内部div宽度加起来总的宽度必须为100%。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<div class="con">
<div class="con1"></div>
<div class="con2"></div>
<div class="con3"></div>
</div>
</body>
</html>
css样式
.con1{
width:20%
}
.con2{
width:30%
}
.con3{
width:50%
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
