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

时间:2014-04-18 21:06:29

标签: javascript php dynamic serving

我现在正在设置一个wordpress网站,我想根据浏览器的宽度制作2个单独的do_shortcode(" []"),并且如果浏览器宽度发生更改,则内容会刷新并更改。有没有办法做到这一点?我从阅读有关PHP / Javascript的其他主题的理解是,由于PHP在JS之前运行,因此两者无法很好地相互交互。有没有最好的方法来做到这一点?

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

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

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

如果你想要这样的东西,只需将以下内容放入 css-file

@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

}

我希望这会有所帮助。对不起,如果我误解了你的问题,这不是你要搜索的答案。