我试图让这个网站更具响应性，并开始使用响应式术语（例如 % 和 ems）来制作所有属性，但由于某种原因，它没有我想要的响应式。我决定使用媒体查询来弥补设计缺陷。
我一直在阅读 Ethan Marcotte 的响应式网页设计，它对大部分设计都有很大帮助，但媒体查询似乎不适用于我的 iPad 或 iPod（也就是我做错了什么）。
任何人都可以很容易地确定我做错了什么吗？
问问题
374 次
2 回答
0
我必须完全确定您的代码，但是从我打开您的网站时可以看到的情况来看，下面的样式表导入实际上并没有从您的项目文件夹中找到文件：
<link rel="stylesheet" href="styles/base.css"/>
<link rel="stylesheet" href="styles/skeleton.css"/>
<link rel="stylesheet" href="styles/layout.css"/>
似乎加载的唯一文件是
<link rel="stylesheet" href="styles/index.css" />
它不包括任何媒体查询。
当我在 Google Chrome 中调整网站大小时，我没有看到任何有意义的响应更改，因为您的 3 个样式表不存在。
于 2012-04-20T00:24:57.360 回答
0
如果它似乎在您的桌面浏览器中运行，但媒体查询在移动设备上不起作用，我可能会猜测您没有视口元标记。IE <meta name="viewport" content="width=device-width, initial-scale=1">
这可确保移动设备不会尝试缩小网页以适应其设备大小，而是允许您确定 CSS（和媒体查询）中的宽度。这篇关于视口元标记的 MDN 文章可能对更多信息有用。
于 2016-10-12T13:40:11.827 回答