我可以通过媒体查询加载不同的模板吗？

Question

我有一个wordpress网站，我正在调整css以适应不同的屏幕尺寸。我更改了我的主题附带的模板，用于某种类型的帖子。我想在较小的屏幕尺寸上使用原始模板。关于如何解决这个问题的任何建议？谢谢！

Answer 1

媒体查询由浏览器计算，而模板由服务器计算，因此没有直接的方法来执行此操作。

一种常见的方法是在服务器端包含各种模板，并使用媒体查询仅显示您想要的模板。

你正在看这样的事情：

<div class="mobile">
   <?php get_template_part("content", "mobile"); ?>
</div>

<div class="desktop">
   <?php get_template_part("content", "desktop"); ?>
</div>

然后在你的CSS中：

.desktop { display: none; }

@media (min-width: 800px) {
  .mobile { display: none; }
  .desktop { display: block; }
}

这会在移动设备上隐藏您的桌面模板，反之亦然。它将从content-desktop.php加载您的桌面模板，从content-mobile.php加载您的移动设备。

值得注意的是，虽然快速而简单，但这通常不是制作自适应网站的最佳方式，因为您将加载内容两次，并会找到它维持下线有点困难。但是，它确实是开始做出响应的好方法。