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的例子。前两个答案非常有用，但我宁愿不必完全修改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/

Answer 2

我想到了两种可能的实现：1）将媒体查询分隔为单独的样式表，2）将特定类预先添加到媒体查询中的所有选择器。

选项1：单独的样式表

将您要删除的所有媒体查询（使用“显示桌面版本”按钮）放入单独的样式表（例如“mobile.css”）中：

<link rel="stylesheet" type="text/css" href="normal.css" />
<link rel="stylesheet" id="mobileStyle" type="text/css" href="mobile.css" />

然后，您可以使用jQuery删除此元素（例如，$('#mobileStyle').remove()）。删除引用样式表的元素将删除样式表中定义的所有样式。

选项2：前置CSS类

将所有内容保存在单个样式表中，但在所有媒体查询选择器前加上一个类。例如，您可以将.mobile-ready类添加到<body>，然后添加：

@media (min-width: ... AND max-width: ...) {
    .mobile-ready header{
    }
    .mobile-ready footer{
    }
    .mobile-ready ...{
    }
}

使用“显示桌面版本”按钮，从.mobile-ready中删除<body>课程，这将删除课程中包含的所有样式。使用LESS或Sass可以轻松地以这种方式编写CSS。

Answer 3

尝试这个......对于编码严重的网站来说，这是一个简单但合理的解决方案。

$('meta[name="viewport"]').prop('content', 'width=870');

将宽度设置为您需要的宽度。我在现有网站到位的情况下使用了这个，我需要允许移动设备显示为普通网页，但普通网页以宽度为865的内容为中心。这样可以最大限度地减少整页在移动设备上的影响

“显示完整网站”按钮以绕过css媒体查询

修改

编辑2

3 个答案:

选项1：单独的样式表

选项2：前置CSS类