Question

我想为一个文档制作多个响应式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，就会执行responsive_1056.css文件。但是一旦达到900px，就不会执行responsive.css（max-width：900px）。

这是否有原因发生？我该如何解决？

Answer 1

Responsive.css可能被拾取，但随后被responsive_1056.css中的数据覆盖

编辑最后一个包含的链接（min-width：900px）可以完成这项工作。

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

Answer 2

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

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

Can I load external stylesheets on request?

我可以为一个文档提供多个响应式CSS样式表吗？如果是这样，怎么样？

2 个答案: