1

我想我在这里很困惑。在响应式设计中有点绿色，我试图根据网站的查看宽度导入 2 个样式表中的 1 个。

但是，当使用以下内容时，在 Firebug 中查看时两者似乎都下拉了。

它是否正确？我究竟做错了什么？

我想要实现的是，如果浏览器宽度小于 940px，则拉 responsive.css，如果大于，拉 full.css

我已经包含了 respond.js 库https://github.com/scottjehl/Respond

@import url("/inc/Styles/full.css") (min-width: 940px);
@import url("/inc/Styles/responsive.css") (max-width: 940px) and (min-width: 100px);
4

2 回答 2

5

是的，这是正确的，不，我可以说你没有做错任何事情。我认为你想多了（而且你真的不需要第二次导入时的最小宽度）。

如果您还没有，请阅读 Ethan Marcotte 的响应式网页设计。

于 2013-01-25T00:25:12.997 回答
1

分离的 css 文件（由@import 调用）总是由浏览器自然加载。媒体查询无法解决该问题。为了能够只提取相关的 css 文件，您需要使用的不仅仅是 CSS。

您可以在服务器或客户端站点上处理该问题。例如，您可以使用 .NET 的 51degrees 库

或者您可以使用 javascript 窗口大小检测器来获取窗口宽度值并通过 AJAX 调用特定的 css 或通过 JS 创建链接元素。

基本上;

$(function(){ 
          if($(window).width() > 980){ 
              // your code etc.
          } else{ 
              // your code etc.
          }  
     });

另请查看此处 如何应用使用 jQuery 动态加载的内联和/或外部 CSS

于 2013-12-07T03:22:50.060 回答