更改设备宽度时更改背景图像

Question

我有一个全屏背景图片。我面临的问题是从手机查看网站时它会被切碎。

我想要的是在移动设备中查看焦点对象。所以我有一个带有焦点对象移动尺寸的裁剪图像。如果设备是平板电脑或台式机，我希望我的代码检测移动设备并将background:url(); 更改为正常图像，但如果正在使用智能手机，则更改图像的裁剪版本。我不知道这会如何发生。我知道 JQuery 和 @media 规则会对我有所帮助。

Answer 1

使用媒体对象检查当前屏幕尺寸是否大于 768。如果是，#bg 值将被覆盖。

#bg {
  background-image: url('small.jpg');
}

@media (min-width: 768px) {
  #bg {
    background-image: url('big.jpg');
  }
}