【发布时间】：2015-10-31 01:38:49
【问题描述】：
我知道这是一个重复的问题，但我的情况不同。我正在构建一个响应式网站，并希望使用 css3 媒体查询为不同的设备使用不同的 css 规则。所以我做了三个文件style-lg.css，style-md.css，style-sm.css。
它们被放置为
<link rel="stylesheet" href="style-lg.css">
<link rel="stylesheet" href="style-md.css">
<link rel="stylesheet" href="style-sm.css">
问题是所有规则都是从 style-lg 加载的。
这是我目前检查的内容<meta name="viewport" content="width=device-width"/>
这里分别是三个文件中的媒体查询：
@media screen and min-width: 1200px{...}
@media screen and (min-width: 992px) and (max-width: 1199px){...}
@media screen and (min-width: 769px) and (max-width: 991px){...}
我已经检查了 stackoverflow 中与此相关的几乎所有链接，但找不到查询在我的工作中不起作用的原因。
例如：
<span class="f-15 f-18 f-22">Text</span>
其中 f-15、f-18 和 f-22 是字体大小。 但是当我更改浏览器窗口的大小时，引导程序将 col-lg 更改为 col-md 并进一步减小窗口大小，将 col-md 更改为 col-sm 但我的课程仍然是 f-22。
谁能解释一下我的代码有什么问题？
提前致谢。
【问题讨论】：
-
你能找到一个可行的例子给我们看吗？
-
您能告诉我们为什么需要分离 css 文件吗？更多文件更多加载时间=更慢的响应。我建议您将这些 css 文件放在一个文件中。 Bootstrap 是移动优先的，因此您可以使用相反的媒体查询。这是我正在使用的媒体查询：
/* Extra Small */ @media(max-width:767px){} /* Small */ @media(min-width:768px) and (max-width:991px){} /* Medium */ @media(min-width:992px) and (max-width:1199px){} @media (min-width:1200px) {} /* Notebooks (Large) */ @media screen and (min-width: 1200px) and (max-width: 1600px) {} /*Full HD */ @media(min-width: 1601px) {}
标签： html twitter-bootstrap css responsive-design media-queries