Html 一个文档可以有多个响应CSS样式表吗？如果是，怎么做？

我想为一个文档创建多个响应css样式表。因此，我：

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive.css" media="screen and (max-width: 900px)">
<link rel="stylesheet" type="text/css" href="responsive_1056.css" media="screen and (max-width: 1056px)">

一旦到达1056，将执行响应的_1056.css文件。但一旦达到900px，responsive.css（最大宽度：900px）就不会执行

---

这有什么原因吗？如何修复它？

Responsive.css可能正在拾取，但随后会被Responsive_1056.css中的数据覆盖

编辑要包含的最后一个链接（最小宽度：900px）应该可以完成这项工作

<link rel="stylesheet" type="text/css" href="responsive_1056.css" media="screen (min-width : 900px) and (max-width: 1056px)">

---

两种方法：首先，打开每个文件，将媒体查询放入其中！只需将整个样式表包装在媒体查询中即可。首先，我要说：

screen and (max-width: 1056px){
...all your styles here...
}

或者可以使用jQuery单独加载每个。文档宽度的页面加载检查：

width = $(window).width();
var sheetToLoad;
if(width > 1056)
    sheetToLoad = "big.css"
elseif(width <1056 && width > 900)
    sheetToLoad = "medium.css"
else
    sheetToLoad = "small.css"

$.ajax(...) //load stylesheet "sheetToLoad"

//Or just see this link

width=$（窗口）.width（）；
var单张负荷；
如果（宽度>1056）
sheetToLoad=“big.css”
elseif（宽度900）
sheetToLoad=“medium.css”
其他的
sheetToLoad=“small.css”
$.ajax（…）//加载样式表“sheetToLoad”
//或者只看这个链接