不同设备的svg背景定位答案

【问题标题】：background positioning of svg for different devices不同设备的svg背景定位
【发布时间】：2021-09-04 10:56:57
【问题描述】：

背景中有两个圆圈，一个在左上角，一个在右下角。对于台式机没问题，但对于移动设备，它应该与设计中的一样。我不明白如何解决这个问题。你能帮忙吗？

给定设计：

我做了什么：

背景圆圈位置不对

Github - github

body {
  background: url('images/bg-pattern-top.svg'), url('images/bg-pattern-bottom.svg'), #19a2ae;
  background-position: -80% 50%, 170% -40%;
  background-repeat: no-repeat, no-repeat;
  background-size: 70%, 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

【问题讨论】：

提供minimal, reproducible example的代码

标签： html css svg background position

【解决方案1】：

也许您应该使用视口宽度 (vw) 和视口高度 (vh) 作为圈子的尺寸和位置。

当宽度 > 高度（像桌面这样的大屏幕）时，你应该使用vw，当高度 > 宽度时（像手机这样的小竖屏），你应该使用vh。显然，您将拥有比 2 个更多的断点，但这个示例可以帮助您：

https://codepen.io/tpmarc/pen/PojGbwx

【讨论】：