不同设备端SVG背景圆形图案定位错位适配问题求解

你当前使用百分比作为背景图的尺寸和定位单位，百分比计算会跟随视口实际宽高动态变化，桌面端和移动端的视口宽高比差异较大，就会导致背景图案位置偏离设计稿。

解决方案 #

修改背景的尺寸单位和定位规则，用vmin单位保证背景图案比例不随视口宽高比变化，同时以视口左上、右下为基准做偏移，适配所有设备尺寸：

body {
  background: url('images/bg-pattern-top.svg'), url('images/bg-pattern-bottom.svg'), #19a2ae;
  background-position: left -20vmin top -35vmin, right -20vmin bottom -35vmin;
  background-repeat: no-repeat;
  background-size: 70vmin, 70vmin;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

你可以根据设计稿的实际效果调整background-position里的偏移数值，调整后即可实现桌面、移动端背景位置统一对齐设计稿的效果。

内容的提问来源于stack exchange，提问作者SAHIL NAZIR