Question

我在右侧边栏中有一个带有信息的wordpress网站，每个页面上的信息都不同。在主要内容中，我有一个信息块说; ＆＃34;有关详细信息，请查看右侧＆＃34;，此信息在每个页面上都是不同的。我希望在CSS中使用@media更改此信息块，因此当您使用移动设备时，它会说; ＆＃34;向下看＆＃34;而不是＆＃34;向右看＆＃34;。

我已尝试使用wordpress插件（Whistles）和主要内容中的短代码。但问题是......我不是谁来维护网站，我需要这个易于使用！

我一直在考虑使用＆＃39; p class =＆＃34; mobile＆＃34;＆＃39;和＆＃39; p class =＆＃34;桌面＆＃34;＆＃39;在页面编辑器中，但是我怀疑那个负责该网站的人会不会理解它（那个负责该网站的人可能是wordpress的新手，可能没有编码经验。

有人知道wordpress插件吗？或者没有编码的简单方法吗？

请帮忙！我有大约100页，我不想要200个口哨来完成这项工作!!!

Answer 1

您可以使用更改content标记上的span css属性的媒体查询来实现此目的。您只需将媒体查询的断点设置为移动侧栏的屏幕宽度即可。 您甚至可以将其用于插件（我不是wordpress专家）。

.side-bar-position:after {
  content: "on the right";
}
@media (max-width: 400px) {
  .side-bar-position:after {
    content: "below";
  }
}

<p>
  See block <span class="side-bar-position"></span>.
</p>

<强> JSFiddle Demo

使用媒体查询更改页面内容（WordPress）

1 个答案: