1. 使用媒体查询

在CSS中使用媒体查询，根据不同设备的尺寸设置不同的背景定位。例如：

@media only screen and (max-width: 768px) { /* 手机设备的SVG背景定位 */ .svg-background { background-position: 0 -50px; } }

@media only screen and (min-width: 769px) and (max-width: 1024px) { /* 平板设备的SVG背景定位 */ .svg-background { background-position: 0 -100px; } }

@media only screen and (min-width: 1025px) { /* PC设备的SVG背景定位 */ .svg-background { background-position: 0 0; } }

2. 使用SVG ViewBox

使用SVG的ViewBox属性，可以让SVG适应不同设备的尺寸。ViewBox定义的是SVG内容的可视范围，当SVG的尺寸改变时，ViewBox会自动缩放和平移SVG内容。例如：

在这个例子中，ViewBox的值为“0 0 800 600”，表示SVG内容的可视范围为左上角点坐标为(0,0)，宽度为800，高度为600。当SVG的尺寸发生改变时，ViewBox会自动调整，保持内容的比例不变。可以在CSS中设置SVG的宽度和高度，让SVG适应不同设备的尺寸。

.svg-background { background-image: url(image.svg); background-size: contain; width: 100%; height: 100%; }

参考