我已经构建了一个带有媒体查询的响应式网站，以定位不同的移动设备，但希望在较小的设备上提供“覆盖所有”链接。单击时，该链接将删除所有媒体查询样式并将页面重置为默认样式，将网站暴露为1024px宽。有没有办法实现这个目标？
答案 0 :(得分：3)
唯一可以做到这一点的方法是使用Javascript。我提出了两个解决方案：
<html>元素上的ID /类：
将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），如果使用 Sass ，这应该不是问题：
@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请求。