8

世界中の美術教師が協力して作業できるように、オープンソースのウェブ アプリを開発しています。google.org や barackobama.com のように、ブラウザのアクティブな幅に基づいて自動的に調整される優れた Web サイトが必要です。

ブラウザ、OS などを検出できますが、その情報は使用したくありません。ブラウザーの幅が調整されたときにトリガーされる 4 つまたは 5 つの異なるスタイルシートが必要です。

たとえば、デスクトップ コンピューターを使用してブラウザーでアプリにアクセスすると、ブラウザーが全画面表示のときにアプリ全体が表示されます。次に、ブラウザが幅を縮小すると、サイトはすぐに動的にフォーマットを変更して、普遍的な互換性を確保します。

ブラウザの種類や元の幅に基づいて CSS を変更するのではなく、「モバイル」デバイスであるか「タブレット」マシンまたは「デスクトップ」ブラウザ。

不思議なことに、私は Google Apps Script を使用してウェブ アプリをホストしているため、メタ ビューポート タグが削除されているように見えます。

現在表示しているブラウザ ウィンドウの幅に基づいて、4 つまたは 5 つの異なるスタイルシートを導入するにはどうすればよいでしょうか。

4

4 に答える 4

16

次のように、CSS メディア クエリを使用することもできます。

<link rel="stylesheet" media="screen and (min-device-width: 700px)" href="css/narrow.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel="stylesheet" media="screen and (max-device-width: 901px)" href="css/wide.css" />

または、次のように jQuery を使用します。

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

どちらも次から見つかりました: http://css-tricks.com/resolution-specific-stylesheets/

于 2012-08-15T01:00:34.863 に答える
9

css メディア クエリが最適です

<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />
于 2012-08-15T01:01:09.823 に答える
8

これを行うには、CSS メディア クエリを使用します。

于 2012-08-15T01:00:10.987 に答える
2

CSSでできます。

<link rel='stylesheet' media='screen and (max-width: 480px)' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 481px)' href='css/pc.css' />

コードと詳細については

ここをクリック

于 2014-03-26T16:17:58.910 に答える