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

Question

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

有没有一种方法可以在我的 HTML5 页面上的样式表链接中使用媒体属性，并实现与使用 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');
}