我的main.css文件顶部有一个@import，它为我的视网膜特定样式提供了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。
答案 0 :(得分：1)
根据MDN "@import"，可以在@import中使用媒体查询 - 声明：
@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 - 属性：“Supported CSS Rules”
答案 1 :(得分：-1)
您可以使用min-device-pixel-ratio将所有视网膜样式包装在媒体查询中，然后将@import文件放入底部的现有css中。或者只是将样式包含在主css中，并使用相同的媒体查询。