问题标签 [media-queries]

我的媒体查询工作正常，但现在不行。我错过了出错的地方。当我检查 Chrome 版本的 Firebug 中的 html 元素时，它表明媒体查询规则正在被编译过程中早期定义的规则覆盖。

谁能发现这个问题？

http://www.jezenthomas.co.uk/huang/

我有 4 个媒体查询。第一，第三和第四个工作，但第二个似乎没有激活。

为什么 480x720（第二个媒体查询）默认为第一个媒体查询？

预期：

实际发生了什么：

为什么 480x720（第二个媒体查询）默认为第一个媒体查询？

Modernizr 2.0 beta 是否有办法检测浏览器对@media 查询的支持？

在 Modernizr 1.7 中，您可以使用 进行测试Modernizr.mq('(min-width)')，但新版本中似乎缺少该功能。有等价物吗？

我在我的 css 中使用媒体选择器：@media all and (orientation:landscape) { /* etc */ 我在 Safari 中测试布局，然后是 iPad 模拟器。但 Safari 似乎固定在横向上。如何告诉 Safari 我的媒体应该是纵向的？

这样我就可以在方向为横向时测试布局。

我找到了 styleSheets 对象的媒体属性，请参阅 http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-MediaList 但至少在 Safari 或 iPad 模拟器中，列表为空。因此，向列表中添加新的媒体字符串可能不是答案。

我尝试将视口元标记中的宽度和高度设置为仓促的纵向形状：不。媒体仍然是横向的。

啊，我不想制作 css 的特殊测试版本。

我正在尝试使用 CSS 媒体查询，专门针对 iPhone。

当我使用常规链接 rel 时，它可以工作：

但是，当我尝试此媒体查询时，它不起作用：

如何使用 CSS 媒体查询来定位 iPhone？

我的网站是一个以页面为中心的 540x500 像素的小盒子。iPhone 和 Blackberry 都在切断顶部的内容。我把它完全集中在页面上。我一直在搞乱元视口设置，希望能在其他设备上处理页面的边距并有一些运气，但归根结底，我找不到结合我的两行代码的解决方案。

我的代码在下面。我探索了媒体查询，将元设置为设备宽度（切断边距）和许多其他选项。老实说，我知道我很挑剔，我在这上面花了很多时间。

我需要帮助！

一、HTML

CSS

元设置

我正在尝试开发一个 Web 应用程序，该应用程序根据设备（及其方向）应用适当的样式表。

我总共有 5 个媒体查询：

一切都可以在桌面、iPad 和 iPhone（浏览器和网络应用程序版本）上运行，但横向媒体查询在 Android 浏览器上失败？有任何想法吗？我把“最大设备宽度”弄错了吗？

我试图在我的网站中使用媒体查询。它在 Firefox 和 safari 中运行良好，但不适用于 IE。有谁知道让媒体查询在 IE（Internet Explorer 7 和 8）中运行良好。

这是代码：

我刚刚发现了CSS @media 查询，我认为它们很棒！但是，我知道并非所有浏览器都支持它们（即除了最新版本的 IE 之外的所有浏览器）。

那我应该在我的默认样式表中做什么？我应该瞄准普通尺寸的屏幕吗？我应该走最低公分母的路线并加载移动样式表吗？或者我应该让设计完全流畅吗？

为不支持@media 查询的浏览器制作默认样式表时，通常有什么好的计划？

我一直在对媒体查询进行一些研究，但我仍然不太了解如何定位特定尺寸的设备。

我希望能够针对台式机、平板电脑和移动设备。我知道会有一些差异，但如果有一个通用系统可用于针对这些设备，那就太好了。

我发现的一些例子：

或者：

每个设备的断点应该是什么？