CSS 媒体查询不起作用 - 尝试加载两个不同的。基于浏览器宽度的样式表答案

【问题标题】：CSS Media Query not workig - Attempting to load two diff. style sheets based on browser widthCSS 媒体查询不起作用 - 尝试加载两个不同的。基于浏览器宽度的样式表
【发布时间】：2013-12-27 07:05:48
【问题描述】：

所以我在我的页面上使用了两个媒体查询：

<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />

<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />

main.css 是默认加载的，但是当浏览器重新调整大小低于 1100px 时，它根本不加载样式表，因此整个页面不呈现样式。

有人知道我做错了什么吗？另外，是否可以在“main.css”中使用媒体查询？所以我只能根据浏览器宽度改变某些元素，而不是加载一个全新的样式表？非常感谢大家:)

【问题讨论】：

标签： html css browser width media-queries

【解决方案1】：

是的，您可以在主样式表中完成所有这些操作，如下所示：

@media only screen and (max-width: 1099px){
 /* css here */
}

@media only screen and (min-width: 1100px){
 /* css here */
}

实际上我也注意到你有 max-device-width: 所以这只会针对 ipad/iphone 等，这可能是你在桌面上看不到这个样式表的原因

【讨论】：

更新：根据您的建议，这就是我想出的。我的设计看起来很棒，直到它在浏览器中达到大约 700 像素宽度，所以我将它配置为在宽度 Here is my code

【解决方案2】：

替代方法是使用 Javascript/Jquery 检测屏幕尺寸并根据该屏幕尺寸加载不同的样式表，但 Adam 的解决方案可能更好，除非您出于特定原因需要分隔样式表。

本文将为您提供使用 jquery 所需的所有信息 - http://css-tricks.com/resolution-specific-stylesheets/

【讨论】：

【解决方案3】：

您还可以使用多个查询 - 每次我对看起来不太正确的宽度进行微调时都会创建一个新查询。

@media (max-width:319px) {
 // styles
}
@media (min-width:320px) and (max-width:479px) {
 // styles
}
@media (min-width:480px) and (max-width:479px) {
 //styles
}
etc..., etc...

我通常还会在每个需要它们的元素上构建查询。我发现，当您将媒体查询的所有规则放在样式表的一个部分时，维护起来会很混乱。

例如：

div.box {
  width: 100%;
}
@media (...) {
  width: 80%;
}
@media (...) {
  width: 60%;
}
etc...

然后在另一个需要调整大小的元素上，我会做同样的事情：

div.otherbox {
  width: 100%;
}
@media (...) {
  width: 80%;
}
@media (...) {
  width: 60%;
}
etc...

【讨论】：