“显示完整网站”按钮以绕过css媒体查询 [英] "Show full site" button to bypass css media queries

问题描述

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

I'm using css media queries on my website to switch to a more vertical layout on smaller devices. This works quite well, but I'd like to add a button on the site with something like "Show desktop version". I want to make this button (or link, whatever) force or alter the media query evaluations so they evaluate as if the screen width was bigger than it is (e.g. 1200px instead of 320px). Is this possible?

我的CSS看起来像这样：

My css looks like this:

#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。
完整网络移动浏览器和屏幕尺寸的媒体查询

I found this interesting approach which uses a css class on the body instead of media queries to switch between layouts. However, it completely does away with the actual media queries and uses javascript instead. "Full web" mobile browsers and screen-size media queries based

优化CSS示例。前两个答案是非常有帮助的，但我不想完全修改css组织在根桌面和移动版本分开。一个更有趣的技术：
LESS ：

Refined the css example. The first 2 answers are very helpful, but I'd rather not have to completely modify the css organization to separate at the root desktop and mobile versions. One more interesting technique: LESS: Can you group a CSS selector with a media query?

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

An interesting approach is to modify the css media queries via javascript. It scares me a bit though because browser support might be unreliable for an such an obscure technique: http://jonhiggins.co.uk/words/max-device-width/

推荐答案

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

There is a bit of redundancy with this method, but a selector has higher specificity its properties have precedence even if a media query matches. For example:

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

点击完整网站

类和完整的网站样式即使适用于395像素宽的设备。 //jsfiddle.net/7ZW9y/rel =nofollow> http://jsfiddle.net/7ZW9y/

这篇关于“显示完整网站”按钮以绕过css媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！