-1

我正在努力使我当前的设计具有响应性。我开始使用@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 样式表用它的样式覆盖了所有其他样式表。

4

2 回答 2

1

你如何调试它们？尝试调整浏览器的大小，这些应该可以工作。另外，我真的不建议用800px，iPad也会掉进去，你最好用767。

于 2012-05-10T18:59:53.980 回答
1

也许您正在寻找最大宽度而不是最大设备宽度？

前者用于显示区域，例如浏览器，后者是实际的设备区域。

此外，您希望将最小的一个（在您的情况下为 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" />
于 2012-05-10T19:46:51.497 回答