是否可以覆蓋所有媒體查詢？

我已經構建了一個包含媒體查詢的響應式網站來定位不同的移動設備，但希望在較小的設備上提供「覆蓋所有」鏈接。點擊後，該鏈接將刪除所有媒體查詢樣式並將該頁面重置爲默認樣式，從而將網站暴露爲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'。謝謝你讓我知道。 –

是否可以覆蓋所有媒體查詢？

回答

相關問題