Html CSS媒体查询不工作-尝试根据浏览器宽度加载两个不同的样式表

因此，我在页面上使用了两个媒体查询：

<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 one，但当浏览器的大小重新调整到1100px以下时，它只加载任何样式表，因此整个页面都不会呈现任何样式

---

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

是的，您可以在主样式表中完成这一切，因此如下所示：

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

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

---

事实上，我还注意到你有最大设备宽度：开，所以这将只针对iPad/iPhone等，这可能就是为什么你没有在桌面上看到此样式表的原因。另一种方法是使用Javascript/Jquery检测屏幕大小，并根据该屏幕大小加载不同的样式表，但Adam的解决方案可能更好，除非您出于特定原因需要分离样式表

---

本文将为您提供使用jquery所需的所有信息-

您也可以使用多个查询-每次我确定一个看起来不太合适的宽度时，我都会创建一个新的查询

@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...

---

更新：根据你的建议，这就是我的想法。我的设计看起来很棒，直到它在浏览器中达到大约700px的宽度，所以我将其配置为在桌面上当宽度<700px时加载窄.css，在任何设备上宽度<1200px时加载窄.css。这样的设置听起来是否正确且有效，以覆盖任何分辨率的桌面用户以及纵向和横向模式下的移动设备。