是否可以覆盖所有媒体查询？

我已经构建了一个包含媒体查询的响应式网站来定位不同的移动设备，但希望在较小的设备上提供“覆盖所有”链接。点击后，该链接将删除所有媒体查询样式并将该页面重置为默认样式，从而将网站暴露为1024像素宽。有没有办法做到这一点？是否可以覆盖所有媒体查询？

来源

2013-01-03 cheriana

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

ID /类<html>元素上：
应用ID或类的HTML元素：<html class="media-queries">。
在媒体查询，每一个选择都会有.media-queries开始：
CSS

@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选择器（.media-queries），如果使用这不应该是一个问题萨斯：

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

外部媒体queries.css
所有媒体查询进入一个单独的css文件。包括它与<link rel="stylesheet" href="media-queries.css">。
然后您得到<link>的ID并移除该元素。
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-04 00:13:03

非常好的答案。 – joshuahornby10

非常感谢！我不得不更新我的jQuery库，并选择了选项＃2，但略有修改如下：view full site – cheriana

我很高兴它帮助你。我不知道你可以使用'document.styleSheets.disabled'。谢谢你让我知道。 –

是否可以覆盖所有媒体查询？

回答

相关问题