1

さまざまなモバイル デバイスを対象とするメディア クエリを使用してレスポンシブ Web サイトを構築しましたが、小型デバイスで利用できる「すべてを上書き」リンクを使用したいと考えています。リンクをクリックすると、すべてのメディア クエリ スタイルが削除され、ページがデフォルトのスタイルにリセットされ、サイトが 1024 ピクセル幅で表示されます。これを達成する方法はありますか？

4

1 に答える 1

3

これを行う唯一の方法は、Javascript を使用することです。私は 2 つの解決策を思いつきました:

id/class on <html>element :
id または class を html element: に適用します<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 selector( ) 。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 に答える