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

时间:2014-08-14 20:19:47

标签: html css responsive-design

我想为一个文档制作多个响应式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)。

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

2 个答案:

答案 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

Can I load external stylesheets on request?