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

我现在正在建立一个wordpress网站，我想根据浏览器的宽度制作两个单独的do_shortcode[]s，如果浏览器的宽度改变，则刷新和更改内容。有没有办法做到这一点？通过阅读其他关于PHP/Javascript的文章，我的理解是，由于PHP是在JS之前运行的，所以两者之间不能很好地交互。有没有最好的办法

---

谢谢你的帮助

如果要更改站点布局，如：如果浏览器最小宽度为960px，请将背景色更改为红色

如果浏览器最大宽度=960px，则将背景更改为绿色

如果您想要类似的内容，只需在css文件中添加以下内容：

如果要在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

}

我希望这有帮助。对不起，如果我误解了你的问题，这不是你想要的答案

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

}