我正在努力使我当前的设计响应。我开始使用@media screen...，但设计中的任何内容都不会改变。我尝试使用html, div, p, a, li, td { -webkit-text-size-adjust: none; }来查看这是否至少有助于字体更改大小（我正在使用em），但没有任何改变。
然后我切换到<link type="text/css"...。我目前在我的HTML文档中链接了3个媒体查询文件，我使用的是HTML5 / CSS3。
我的问题是：为什么文档只引用第一个文件？我拿出了核心样式表，除了直接定位的表单之外什么都没用，看看是否会阻止它只使用第一个样式表，但它没有。字体尚未调整大小。容器不会调整大小。图像不会调整大小或删除。仅引用第一个样式表 - 其他样式表将被忽略。
这些是我当前链接的样式表：
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 800px)" href="scripts/css/style800.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="scripts/css/style1024.css" />
编辑：样式表确实从一个更改为另一个，但样式本身不会更改。这就像1280样式表一样，用其样式覆盖了所有其他样式表。
答案 0 :(得分：1)
你如何调试它们？ 尝试调整浏览器大小，这些应该可行。 另外，我真的不建议使用800px，因为iPad也会使用它，你最好使用767.
答案 1 :(得分：1)
也许您正在寻找max-width而不是max-device-width？
前者用于显示区域，例如浏览器，后者是实际的设备区域。
另外，你想把最小的一个（在你的情况下为800px）放在最后。
试试这个：
<link rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link rel="stylesheet" media="only screen and (max-width: 1024px)" href="scripts/css/style1024.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="scripts/css/style800.css" />