“显示完整站点”按钮可绕过 CSS 媒体查询

我在我的网站上使用 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 代替。基于“全网络”移动浏览器和屏幕尺寸的媒体查询

edit

完善了 css 示例。前两个答案非常有帮助，但我不想完全修改 css 组织以在根桌面和移动版本上分开。另一种有趣的技术：LESS：您可以将 CSS 选择器与媒体查询分组吗？

edit 2

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

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

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

When full site单击后，添加.full-site类和完整的网站样式甚至适用于宽度为 395 像素的设备。

http://jsfiddle.net/7ZW9y/