Question

为了使用CSS3 Media Queries创建我的网站的移动版本，我将创建一个用于小屏幕设备的单独的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文件，它看起来如下：

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文件中，让它知道它只适用于小型设备。

Answer 1

将媒体查询移至CSS文件本身。

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

   // Your CSS rules

}

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

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

Answer 2

如果您的small-device.css很小（通常是这样），那么所有设备是否都能获得代码并不重要。特别是因为管道会为你压缩它。在这种情况下，您只需将small-device.css添加到source_filenames的末尾，然后将媒体查询添加到该文件中，如下所示：

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

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

}

当我在Django中使用管道压缩所有css文件时，如何指定特定于设备的css文件？

2 个答案: