我想为一个文档制作多个响应式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)。
这是否有原因发生?我该如何解决?
答案 0 :(得分:2)
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)">
答案 1 :(得分:0)
两种方式:首先,只需打开每个文件并将媒体查询放入其中!只需将整个样式表包装在媒体查询中即可。在开始时:
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