如何通过js操纵屏幕宽度？

Question

我会尝试在这里解释我的用例。 在我的网站中，我有桌面视图的断点和平板电脑视图的断点（更紧凑）。 我正在尝试添加一个功能，以便在从桌面浏览时看到平板电脑视图，因为某些成员更喜欢桌面上的紧凑设计。

为此，我想我需要欺骗'@media（max-width：X）'查询。 我正在寻找可以操纵屏幕宽度值的JS代码，因此当浏览器计算最大宽度时，它将与我指定的值相对。

有一点需要注意，这是假设在桌面浏览器上工作，因此这里不能使用元视口。

Answer 1

一种解决方案是将特定类（例如： .tablet ）应用于身体。

<body class="tablet"></body>

在你的CSS中：

@media screen and (/* your query */) {
   .tablet .my-class {
        /* tablet specific stuff */
    }
}

然后，您可以删除.tablet类，并通过JavaScript将其替换为.desktop

var body = document.body;

var switchToDesktop = function() {
    body.className = body.className.replace('tablet', 'desktop');
}

var switchToTablet = function() {
    body.className = body.className.replace('desktop', 'tablet');
}

var toggleView = function() {
    (body.className.indexOf("tablet") > -1) ?
        switchToDesktop() :
        switchToTablet();
}

如果您使用的是SASS或LESS ，则可以嵌套特定于平板电脑的样式。

@media screen and (/* your query */) {
   .tablet {
        h1 {
            /* tablet specific h1 */
        }
        .my-div {
            color: red;
        }
        /* etc... */
    }
}

如何通过js操纵屏幕宽度？

问题描述

1 个解决方案

解决方案1
3 2014-12-24 15:44:13

如何通过js操纵屏幕宽度？

问题描述

1 个解决方案

解决方案1 3 2014-12-24 15:44:13

解决方案1
3 2014-12-24 15:44:13