Question

我为该网站创建了水平滚动视差网站我想根据浏览设备添加背景图片

例如

来自普通电脑<img src="bg.png">
来自平板电脑<img src="bg-500px.png">
来自较小的手机<img src="bg-small.png">

我如何获得解决方案，我尝试了<body onload="fun()">

in

fun(){
    var bg=d.getEBI("img id");
    if(window.innerwidth=referenceWidth)
    {
        bg.src=respective-img.png
    }
}

Answer 1

一种方法可以通过CSS使用媒体查询CSS Media Queries来实现。而不是<img>使用带背景图片的<div>

<div class="background"></div>

/*For mobile*/
@media (max-width: 480px) {
  .background {
    background-image: bg-small.png;
  }
}

/*For Tablet*/
@media (max-width: 1024px) {
  .background {
    background-image: bg-500.png;
  }
}

/*For Desktop*/
@media (min-width: 1024px) {
  .background {
    background-image: bg.png;
  }
}

如果你想通过JavaScript在问题中提到它，那么它有点棘手。您需要按照以下步骤进行操作

步骤1.使用一些外部库来检测设备类型（例如Device detection in JS）

步骤2.使用自定义HTML标记说<myimg>（HTML custom element）而不是<Img>标记

步骤3.为此自定义HTML标记注册事件侦听器，并在此事件侦听器中根据步骤1中检测到的设备类型更改图像src类型。

在HTML之前使用js的背景图像加载响应式设计

1 个答案: