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

Question

这是我的 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 样式表未加载，为什么？

Answer 1

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

所以困惑可能来自于两者的不想要的组合。

我会将“style.css 的规则更改为最小宽度:769px”