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 个答案: