使用基于屏幕分辨率的媒体查询从多个css文件中进行选择

Question

我想针对不同的屏幕分辨率定位我的网站（例如：1600x1200,1366x768等）我目前有多个css文件，我使用基于screen.height和screen.width获得的jquery / javascript加载。

有没有办法在HTML5页面的样式表链接中使用media属性，并实现与使用jquery / javascript方法获得的相同的行为？下面给出的东西：

<link href="/css/layout.css" media="screen and (device-height:768px)" rel="stylesheet" type="text/css">
<link href="/css/layout1600x1200.css" media="screen and (device-height:1200px) and (device-width:1600px)" rel="stylesheet" type="text/css">

我还需要加载默认的css文件，以防客户端的分辨率与上述媒体查询中提到的条件不匹配

Answer 1

您可以根据屏幕在主css文件中执行此操作

@media screen and (max-width: 960px) 
{
   /* your imports */
   @import url('/css/styles1.css');
   @import url('/css/styles2.css');
}