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

andrewle
  • 47

image

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

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

image

回复
阅读 523
2 个回答
✓ 已被采纳
<!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 都可以

css的单位不止有'px',还有'%','vw','vh','em','rem',根据需要实现的需求,使用不同的单位;题主看看屏幕适配相关的文章,这种问题一通百通。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏