javascript - "Show full site"绕过 css 媒体查询的按钮

Question

我在我的网站上使用 CSS 媒体查询，以便在较小的设备上切换到更垂直的布局。这工作得很好，但我想在网站上添加一个按钮，比如“显示桌面版本”。我想让这个按钮(或链接，无论什么)强制或改变媒体查询评估，以便他们评估好像屏幕宽度大于它是(例如 1200px 而不是 320px)。这可能吗？

我的 CSS 是这样的:

#logo {
    /* Mobile style */
    [...]
    
    @media (min-width: @screen-sm) {
        /* Desktop style */
        [...]
    }
}

#footer {
    /* Mobile style */
    [...]
    
    @media (min-width: @screen-sm) {
        /* Desktop style */
        [...]
    }
}

/* And so on... i.e. multiple piecewise styles, following the same pattern used in Bootstrap's css */

我发现了这种有趣的方法，它在主体上使用 css 类而不是媒体查询来在布局之间切换。但是，它完全取消了实际的媒体查询，而是使用 javascript。 "Full web" mobile browsers and screen-size media queries based

编辑

改进了 css 示例。前 2 个答案非常有帮助，但我宁愿不必完全修改 css 组织以在根桌面和移动版本中分开。另一个有趣的技术: LESS: Can you group a CSS selector with a media query?

编辑2

一个有趣的方法是通过 javascript 修改 css 媒体查询。虽然这让我有点害怕，因为浏览器支持对于这样一种晦涩的技术可能不可靠: http://jonhiggins.co.uk/words/max-device-width/

Answer 1

此方法有一点冗余，但选择器具有更高的特异性，即使媒体查询匹配，其属性也具有优先权。例如:

.container, .full-site.container {
    /* full site styles */
}
@media (max-width: 395px) {
    .container {
        /* mobile styles */
    }
}

当点击full site 时，添加.full-site 类，即使在宽度为 395 像素的设备上也会应用完整的网站样式。

http://jsfiddle.net/7ZW9y/