0

@import我的 main.css 文件顶部有一个为我的特定于视网膜的样式拉入retina.css 的文件。

是否可以添加媒体查询以仅在视网膜设备上@import显示retina.css 文件？我不希望在每个页面/每个设备上加载retina.css，并且我想将视网膜样式保存在一个单独的文件中。

@import "retina-styles.css";

/*** other styles below ***/

我不能在 中使用<link rel="stylesheet" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />，<head>因为开发人员想使用@import.

4

2 回答 2

1

根据MDN “@import”，可以在@import-statements 中使用媒体查询：

@import url;
@import url list-of-media-queries;

所以这个应该可以工作（未经测试）：

@import url(retina.css) screen and (-webkit-min-device-pixel-ratio: 2);

您可以在 Apple 的 Safari 开发人员库中阅读有关-webkit-min-device-pixel-ratio-property 的更多信息：“支持的 CSS 规则”

于 2012-08-15T21:38:38.957 回答
-1

您可以使用 min-device-pixel-ratio 将所有视网膜样式包装在媒体查询中，然后只需将文件@import 到底部的现有 css 中。或者只是将样式包含在主 css 中，并围绕它们进行相同的媒体查询。

于 2012-08-14T22:10:40.900 回答