当前位置：文江博客话题详情

不同设备不同大小浏览器窗口的定位问题？

发布于 2022-09-12 04:48:22 字数 190 浏览 16 评论 0

请问大神，上面的需求如何实现，我用相对定位在电脑上做好，用手机浏览器就对不上了。

背景图片是会根着浏览器窗口大小改变而改变的。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

野鹿林 2022-09-19 04:48:22

<!DOCTYPE html>
<html>
<head>
<style>
  body {margin:0;padding:0;}
  .layout {position:relative;background-color:#CCC;}
  .layout img {width:100%;}
  .box {position:absolute;width:20vw;height:20vw;background-color:rgba(0,0,0,0.5);}
  .box.box-a {top:0;left:60vw;}
  .box.box-b {bottom:0;left:30vw;}
</style>
</head>
<body>
<div class="layout">
  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
  <div class="box box-a"></div>
  <div class="box box-b"></div>
</div>
</body>
</html>

div 里的 img 设宽度 100%，img 只设置宽度，高度会自适应，外面的 div 的高度就是自适应 img 的
div 的宽度根据实际需要来定
然后内部用绝对定位，单位用 百分比 或者撑满的时候用vw 都可以