移动设备的 Wordpress 响应能力和内容

Question

我正在尝试建立自己的 wordpress 网站，有几个问题。

目前我在首页展示了一个背景视频。我想知道是否可以在移动设备上用图片幻灯片替换此视频？

此外，我通常如何才能在 desktop/mobile 视图中显示不同的内容？

提前致谢！

Answer 1

这可以通过使用媒体查询来实现。

例如你可以说：

@media (max-width: 800px) {
    #video-div {display:none;}
    #Slideshow-div  {display:block;}
 }

上面的代码意味着视频将不会显示，除非浏览器的宽度 window 等于或大于 800px。

@media (min-width: 800px) {
    #Slideshow-div {display:none;}
    #video-div {display:block;}
}

这段代码是说只要屏幕宽度超过800px，幻灯片就不会出现。

您可以尝试 px 量并有许多不同的媒体查询。