1

我已经建立了一个响应式网站，其中包含针对不同移动设备的媒体查询，但希望在较小的设备上提供“覆盖所有”链接。单击时，该链接将删除所有媒体查询样式并将页面重置为默认样式，从而将站点显示为 1024 像素宽。有没有办法做到这一点？

4

1 回答 1

3

您可以做到这一点的唯一方法是使用 Javascript。我想出了两个解决方案：

id/class on <html>element：
将 id 或类应用于 html 元素：<html class="media-queries">。在您的媒体查询中，每个选择器都以：CSS
开头.media-queries

@media (max-width: 300px) {
    .media-queries #nav li {
        display: block;
    }
    .media-queries #main, .media-queries #aside {
        float: none;
    }
}

然后，让 JS 删除class="media-queries".
HTML

<a id="del-mq" href="#">Default style</a>

JavaScript

var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
    document.getElementsByTagName('html')[0].removeAttribute('class');
}

jQuery

$('#del-mq').click(function() {
    $('.media-queries').removeClass();
});


优点：没有额外的 http 请求。
缺点：很多 css 选择器（ ），如果使用Sass.media-queries，这应该不是问题：

@media (max-width: 300px) {
    .media-queries {
        #nav...
        #main...
    }
}



外部 media-queries.css
所有媒体查询都放在一个单独的 css 文件中。将其包含在<link rel="stylesheet" href="media-queries.css">.
然后你得到一个 ID<link>并删除该元素。
HTML

<head>
    <link rel="stylesheet" href="default.css">
    <link id="media-queries" rel="stylesheet" href="media-queries.css">
</head>
<body>
    ...
    <a id="del-mq" href="#">Default style</a>
    ...
</body>

Javascript

var delMQ = document.getElementById('del-mq');
delMQ.onclick = function() {
    document.getElementsByTagName('head')[0].removeChild(document.getElementById('media-queries'));
}

jQuery

$('#del-mq').click(function() {
    $('#media-queries').remove();
});



优点：不需要大量的 CSS 选择器。
缺点：额外的 http 请求。

于 2013-01-04T00:13:03.103 回答