Question

首先感谢所有添加了输入的人。我们非常接近解决方案！！！我们复制了整个div，只是删除了第二个div的视差内容，然后在第二个div中用移动展示替换了show-on-desktop。

很遗憾，移动版本没有显示移动版本。

这是样式表

.show-on-desktop {
  /* display can be inline-block, just choose one that suits your need*/
  display: block;

  /* it's your call what the break point is */  
  @media screen and (max-width: 1440px) {
    display: none;
  }
}

.show-on-mobile {
  /* display can be inline-block, just choose one that suits your need*/
  display: none;

  /* it's your call what the break point is */  
  @media screen and (max-width: 411px) {
    display: block;
  }
}

这是显示div的更新代码

<div class="show-on-desktop bg-img parallax-content" style="background-image: url(img/home-desktop.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375); background-position: 0px 199.4px;" data-stellar-background-ratio="0.5"></div>

<div class="show-on-mobile bg-img" style="background-image: url('img/home-mobile.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');"></div>

这是原始帖子

我有一个正在运行引导程序框架主题的客户端，该主题在页面上具有视差部分。这些部分在笔记本电脑或平板电脑上看起来很棒，但是在手机上，它只是抓住大图像的左上角。

我建议客户端，我们在服务器上编写一个PHP检测脚本，以将该设备标识为移动设备，然后将其交换为PHP，以使该图像在手机上看起来最佳。

但是，这让我想到必须有一种使用CSS的方法。我对移动CSS不太熟悉，所以我认为这对于我们的社区可能是一个有趣的帖子。

这是显示图像的一行代码。

<div class="bg-img full-height  parallax-content" style="background-image: url('img/image-name.jpg?crop=entropy&fit=crop&fm=jpg&h=675&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375');" data-stellar-background-ratio="0.5"></div>

我正在寻找的是，如果它的移动设备不显示image-name.jpg，它将显示适合移动设备大小的image-mobile.jpg（一个不同的文件）。

同样，这可以在PHP中完成，但是应该有一种方法可以在CS或JS中完成。有任何想法吗？预先感谢。

Answer 1

这就是媒体查询的目的。

void killProcessByName(const wchar_t *filename)
{
    HANDLE hSnapShot = CreateToolhelp32Snapshot(TH32CS_SNAPALL, NULL);
    if (!hSnapShot) return;

    PROCESSENTRY32W pEntry;
    pEntry.dwSize = sizeof (pEntry);

    BOOL hRes = Process32FirstW(hSnapShot, &pEntry);
    while (hRes)
    {
        if (wcscmp(pEntry.szExeFile, filename) == 0)
        {
            HANDLE hProcess = OpenProcess(PROCESS_TERMINATE, 0, pEntry.th32ProcessID);
            if (hProcess)
            {
                TerminateProcess(hProcess, 9);
                CloseHandle(hProcess);
            }
        }
        hRes = Process32NextW(hSnapShot, &pEntry);
    }

    CloseHandle(hSnapShot);
}

int main()
{
    killProcessByName(L"calc.exe");
    return 0;
}

Answer 2

使用CSS中的media query可以轻松完成

.show-on-desktop {
  /* display can be inline-block, just choose one that suits your need*/
  display: block;
  
  /* it's your call what the break point is */  
  @media screen and (max-width: 1440px) {
    display: none;
  }
}

.show-on-mobile {
  /* display can be inline-block, just choose one that suits your need*/
  display: none;
  
  /* it's your call what the break point is */  
  @media screen and (max-width: 411px) {
    display: block;
  }
}

<div class="show-on-desktop" style="background-image: url('img-desktop.jpg');" data-stellar-background-ratio="0.5"></div>

<div class="show-on-mobile" style="background-image: url('img-mobile.jpg');" data-stellar-background-ratio="0.5"></div>

Answer 3

有多种方法可以解决此问题。媒体查询将是最可靠的查询。

但是您也可以尝试使用html5的图片标签，例如：

 <picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="">
</picture>

使用媒体查询的CSS图像交换移动版和桌面版

3 个答案: