当屏幕为 768px 宽时，为什么我的 css 样式表的 html 链接不起作用？

【问题标题】：Why are my html links for css stylesheets not working for when the screen is 768px wide?当屏幕为 768px 宽时，为什么我的 css 样式表的 html 链接不起作用？
【发布时间】：2015-12-11 06:53:18
【问题描述】：

这是我的 HTML 链接：

<link rel="stylesheet" href="stylesheet/main.css" />
<link rel="stylesheet" href="stylesheet/style.css" media="(min-width: 768px)" >
<link rel="stylesheet" href="stylesheet/mobile.css" media="(max-width: 768px)" type="text/css" />

遗憾的是，当屏幕为 768 像素宽 (iPad) 时，移动 CSS 样式表无法加载，为什么？

【问题讨论】：

标签： html css mobile cross-browser

【解决方案1】：

实际上，“style.css”和“media.css”样式表都会被加载，因为如果屏幕正好是 768px 宽，则两个规则都适用（768 是一个的最大值和另一个的最小值）。

因此，混乱可能来自两者的不受欢迎的组合。

我会将 "style.css 的规则更改为 min-width: 769px`

【讨论】：

为了节省未来的维护，您可以理想地级联您的媒体查询，就像您的样式一样。我发现像这样拆分 CSS 会导致更多的维护问题。您已经将main.css 申请到所有内容，所以为什么不继续努力：(max-width: 768px) 然后(max-width:1200px)。
谢谢！有一个小问题，当我在 chrome 开发人员选项上启用仿真（控制台）时，这不起作用，它不起作用。在其他浏览器上，确实如此。