0

为了使用 CSS3 媒体查询来创建我的网站的移动版本，我将创建一个用于小屏幕设备的单独 css 文件。如果我不在 django 中使用管道压缩器，我只需在我的主样式表之后添加以下行：

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

但是现在我正在使用 Django 管道来压缩我所有的 css 文件，包括 jquery、jquery-ui 和我的常规 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)"信息包含在管道中的新的小型设备特定 css 文件中，以让它知道它仅适用于小型设备。

4

2 回答 2

1

将您的媒体查询移动到 CSS 文件本身。

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

   // Your CSS rules

}

管道只是一个压缩机。它没有任何逻辑来处理条件包含或媒体条件链接标签之类的事情。

它实际上只需要一个文件列表并将它们变成一个巨大的文件。

于 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 回答