& quot;显示完整网站& quot;按钮绕过CSS媒体查询 [英] "Show full site" button to bypass css media queries

问题描述

我在网站上使用CSS媒体查询来切换到较小设备上的垂直布局.效果很好，但我想在网站上添加一个类似显示桌面版本"的按钮.我想使此按钮(或链接，无论如何)强制或更改媒体查询评估，以便它们评估时好像屏幕宽度大于实际宽度(例如1200像素而不是320像素).这可能吗?

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组织以在根桌面版本和移动版本中分开.一种更有趣的技术:更少:您可以将CSS选择器与媒体查询?

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 */
    }
}

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

When full site is clicked, add the .full-site class and the full site styles will apply even on devices with a 395 pixel width.

http://jsfiddle.net/7ZW9y/

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