如何根据浏览器宽度动态重新提供内容？答案

【问题标题】：How to dynamically re-serve content based on browser width?如何根据浏览器宽度动态重新提供内容？
【发布时间】：2014-04-18 21:06:28
【问题描述】：

我现在正在建立一个 wordpress 网站，我想根据浏览器的宽度制作 2 个单独的 do_shortcode("[]")，并在浏览器宽度为时刷新和更改内容改变了。有没有办法做到这一点？我通过阅读其他有关 PHP/Javascript 的线程的理解是，由于 PHP 在 JS 之前运行，因此两者不能很好地相互交互。有没有最好的方法来做到这一点？

感谢您的帮助！

【问题讨论】：

标签： javascript php dynamic serving

【解决方案1】：

如果您想更改网站的布局，例如：如果 browser-min-width = 960px 将背景颜色更改为红色，

如果 browser-max-width = 960px 将背景更改为绿色。

如果您想要这样的东西，只需将以下内容放入您的 css 文件：

@media only screen and (min-width:960px){
   //DO something
}

@media only screen and (max-width:768px){
   //DO something
}

@media only screen and (min-width:768px) and (max-width:960px){
   //DO something
}

如果您想在 javascript 中执行此操作，请使用以下代码：

if (window.matchMedia('only screen and (max-width: 960px)').matches) {
//DO something

}

if(window.matchMedia('only screen and (min-width: 768px) and (max-width: 960px)').matches) {
//DO something

}

我希望这会有所帮助。抱歉，如果我误解了您的问题，这不是您要寻找的答案。

【讨论】：