怎么让div 的物理宽度在视口变化时和分辨率变化时都保持一致？
问题描述
比如这个网站左边的导航栏（Page1为题头的那块）宽度始终一致是怎么做到的呢？https://www.figma.com/file/XL...
自己尝试过哪些方法
如果用px作为单位，第三张图宽度与第一张一致，第二张图宽度与第一张不一致；
如果用vw作为单位，第二张图宽度与第一张一致，第三张图宽度与第一张不一致；
相关代码
以下为用vw做div宽度的例子，你会发现当viewpoint缩小时，<div id="side"></div>的比例会很怪。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script>
window.onresize = function () {
document.title = window.innerWidth + " " + window.innerHeight;
}
</script>
<style type="text/css">
#side {
background: yellow;
width: 5vw;
height: 95vh;
min-width: 50px;
min-height: 700px;
float: left;
position: relative;
margin-top: 2vh;
margin-left: 2vw;
}
#box {
float: right;
position: relative;
margin-top: 2vh;
margin-right: 2vw;
overflow: hidden;
width: 85vw;
height: 95vh;
background: red;
}
#box1 {
width: 800px;
height: 800px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
}
</style>
</head>
<body>
<div id="side"></div>
<div id="box">
<div id="box1"></div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论