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

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

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

javascript css

html5 html 前端

阅读 2.4k

2 个回答

Fractal

✓ 已被采纳

<!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 都可以

YGJ

23915

发布于
2020-09-27

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？