0

CSS3メディアクエリを使用してWebサイトのモバイルバージョンを作成するために、小さな画面のデバイスに使用される別のcssファイルを作成します。djangoでパイプラインコンプレッサーを使用しない場合は、メインのスタイルシートの後に次の行を追加するだけです。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

しかし、今はDjangoパイプラインを使用して、jquery、jquery-uiおよび通常のcssファイルを含むすべてのcssファイルを圧縮しています。次のようになります：</ p> 

PIPELINE_CSS = {
'website-css': {
    'source_filenames': (
        'css/website-ui-theme/jquery-ui-1.8.19.custom.css',
        'css/jquery.lightbox-0.5.css',
        'css/shared.css',
    ),
    'output_filename': 'css/website.css',
    'extra_context': {
        'MEDIA_DOMAIN': settings.MEDIA_DOMAIN,
    },
},
}

media="only screen and (max-device-width: 480px)"そのため、パイプラインの新しいsmall-device-spefic cssファイルに情報を含めて、それが小型デバイス専用であることを通知するにはどうすればよいのでしょうか。

4

2 に答える 2

1

メディア クエリを CSS ファイル自体に移動します。

@media only screen and (max-device-width: 480px) {

   // Your CSS rules

}

パイプラインは単なるコンプレッサーです。条件付きの包含やメディアの条件付きリンク タグなどを処理するロジックはありません。

文字通り、ファイルのリストを取得して、それらを 1 つの巨大なファイルに変換します。

于 2013-02-25T18:14:42.497 に答える
1

あなたsmall-device.cssが小さい場合（通常はそうです）、すべてのデバイスがコードを取得するかどうかは問題ではありません。パイプラインが圧縮するため、特にそうではありません。この場合、次のようにメディアクエリをそのファイルsmall-device.cssの最後に追加して追加するだけです。source_filenames

@media only screen and (max-device-width: 480px) {

    /* All your small-device rules go here... */

}
于 2013-02-25T18:16:48.383 に答える