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

Question

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

有没有一种方法可以让我在 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');
}