用于移动设备的 CSS 媒体查询导入答案

【问题标题】：CSS Media Query Import for mobile用于移动设备的 CSS 媒体查询导入
【发布时间】：2013-01-24 19:54:06
【问题描述】：

我想我在这里很困惑。在响应式设计中有点绿色，我正在尝试根据网站的查看宽度导入 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);

【问题讨论】：

您最好将所有规则包含在一个 css 文件中，然后将其提供 Gzip 压缩文件，而不是担心加载两个文件。

标签： css responsive-design media-queries

【解决方案1】：

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

如果您还没有阅读过，请阅读 Ethan Marcotte 的 Responsive Web Design。

【讨论】：

我可能想多了 =)
链接中的信息很有用~

【解决方案2】：

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

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

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

基本上;

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

也检查这里 How to apply inline and/or external CSS loaded dynamically with jQuery

【讨论】：