检测屏幕分辨率并修改布局

Question

我需要检查用户的分辨率是<1300px还是> 1300px，是否小于1300px才能加载水平div的布局，是否大于1300px来加载垂直div的布局。

模板是一样的，我只需要根据分辨率将一个div放在水平或垂直位置即可。

由于我无法使用PHP执行此操作，因此必须使用javascript进行操作，因此必须使用“加载”功能加载模板的一部分，该模板的垂直或水平div是什么？ 我正在使用Yii框架

Answer 1

通常，这种事情在CSS域中（通过媒体查询 ），而不在JavaScript域中。

不过，您可以使用screen对象获取用户屏幕的尺寸：

var width = screen.width; // Or screen.availWidth;

Answer 2

您可以为此使用CSS媒体查询：

// For screen < 1300px
@media screen and (max-width: 1300px) {
    .foo {
        ...
    }
}

// For screen > 1300px
@media screen and (min-width: 1300px) {
    .foo {
        ...
    }
}

Answer 3

在JavaScript中，您可以通过以下方式检测到它：

window.screen.availHeight
window.screen.availWidth

而在CSS中，您需要使用媒体查询 ：

@media screen and (min-width: 1200px)