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

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.

加载您的移动模板

值得注意的是，虽然快速简单，但这通常不是制作响应式网站的最佳方式，因为您将加载两次内容，并且会发现维护起来有点困难线。然而，这无疑是开始让事情响应的好方法。

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

Can I load a different template via a media query?

php

wordpress

templates

media-queries

responsive