WordPress的移动响应能力和内容

Question

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

目前，我在首页上显示了背景视频。 我想知道是否可以用移动视图上的图像幻灯片替换该视频？

另外，我通常如何在台式机/移动设备视图中显示不同的内容？

提前致谢！

Answer 1

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

因此，例如，您可以说：

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

上面的代码表示，除非浏览器窗口的宽度等于或大于800像素，否则视频将不会显示。

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

该代码表示​​只要屏幕宽度超过800像素，就不会显示幻灯片。

您可以使用px数量进行操作，并可以使用许多不同的媒体查询。