问题标签 [media-queries]

我最近一直在为一个网站开发一个移动版本，如果检测到浏览器在移动设备上，我只是希望能够更改 CSS 文件。你可以在这里查看我以前的尝试，但我现在决定完成这项工作的最可行方法是专注于媒体查询。

我在这里遇到的问题是媒体查询根本不起作用。它总是加载默认样式表。这是我的代码：

我错过了这段代码吗？我已经尝试使用为此提供的许多教程，但似乎没有一个对我有帮助。我真的在这里遇到了死胡同，所以任何帮助都将不胜感激。

嘿伙计们，奇怪的情况，我不知道如何解决这个问题。

我正在尝试使用媒体查询的响应式网站。嵌入的 YouTube 视频也应响应布局，因此我尝试将每个视频的 with 设置为 100% 并按比例计算其高度！

结果如下所示：

所以最初这个视频从 youtube 嵌入时是 500 像素 x 306 像素。

问题是这件事实际上可能有效，但我不知道百分比指的是哪里。其中 100% 的宽度是完全正确的并且取决于我的布局 61% 的高度是不正确的。61% 是正确的数字，但它看起来是错误的，因为它可能是某个外部容器或其他东西的 61%。

知道如何解决这个问题。我只是希望我的视频是 100% 的（这现在是正确的 - 即使在调整大小时也是如此）并且比例高度取决于视频的原始值？

我想知道运算符and,only和not逗号,在与媒体查询一起使用时的作用和含义是什么？

是否有任何其他运算符可以与媒体查询一起使用？

我有两个样式表，一个应该只适用于 iPhone 和其他手持设备

@media screen and max-device-width: 480px { ... }

而另一个应该仅适用于其他情况

@media screen and min-device-width: 481px { ... }

我目前将它们放在一个大的 css 文件中，在@media上面提到的两个不同部分中，但后来我意识到 IE7/8 不适用任何部分。

问题的解决方案是什么？我可以谷歌搜索的唯一解决方案是在 IE 条件注释中再次包含桌面样式表：

但是W3C网站没有这个也能达到同样的效果。如何？

高度和宽度与设备宽度和设备高度之间有什么区别（简单来说）？

有人可以用外行的方式向我解释orientation媒体功能的作用吗？

aspect-ratio和之间的简单术语有什么区别device-aspect-ratio？

有人可以用非常简单的术语向我解释color媒体功能究竟做了什么吗？

我环顾四周，但需要一个更简洁的答案来回答这个问题。

我正在尝试在我当前的项目中为多种媒体设备构建 CSS 的最佳方法。我希望能够有一个样式表：

1. CSS 重置（一切使用）
2. 正常的桌面“屏幕”。（仅限台式电脑）
3. 打印“打印”（仅打印）
4. iPhone/掌上电脑（仅限掌上电脑）
5. IE6 样式表（仅限 IE6）

所以我的问题是：我认为控制这种情况的正确方法是否正确。

• 为 resets.css 设置 media="all"
• 为 desktop.css 设置 media="screen"
• 对旧版浏览器使用条件注释“此处”。
• 为 print.css 设置 media="print"
• 使用 css3 媒体查询，例如：@media only screen and (min-device-width: 320px) and (max-device-width: 480px){ }

有没有人有更多的经验来设置可以分享他们的方法的多个设备 css？你如何自己组织这个？

下面的值是什么意思？