文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS @import仅用于Retina显示

问CSS @import仅用于Retina显示
EN

Stack Overflow用户

提问于 2012-08-14 21:48:49

回答 2查看 884关注 0票数 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。

retina-display

css

media-queries

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-08-15 21:38:38

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

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

因此，这个应该有效(未经测试)：

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

您可以在苹果的Safari开发者库中阅读更多关于-webkit-min-device-pixel-ratio-property的信息："支持CSS规则“

票数 1

Stack Overflow用户

发布于 2012-08-14 22:10:40

您可以使用最小设备像素比将所有视网膜样式封装在媒体查询中，然后将文件@导入到底部的现有css中。或者，只需将样式包含在主css中，其中包含相同的媒体查询。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11961317

复制

相似问题

问CSS @import仅用于Retina显示
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS @import仅用于Retina显示EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS @import仅用于Retina显示
EN