每个浏览器的媒体查询答案

【问题标题】：Media queries for each browser每个浏览器的媒体查询
【发布时间】：2015-07-23 10:03:04
【问题描述】：

我想根据浏览器调整输入字段的大小。我可以为每个浏览器编写媒体查询，以便在单独的浏览器上为输入字段设置单独的宽度，例如对于 mozilla，它将在 chrome 上具有单独的宽度，而在 opera 上它将具有单独的宽度。

【问题讨论】：

标签： html css

【解决方案1】：

Media queries 是媒体查询，而不是浏览器 查询。它们用于测试视口、设备或显示器的某些属性。没有可让您测试特定浏览器的媒体功能。

【讨论】：

对不起，先生，您错了。可以使用媒体查询来定位浏览器（请参阅此处：browserhacks.com）例如，此媒体查询特定于 FF+30 @media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {} 此外，使用“@supports”可以是针对特定浏览器的一种方式，例如: @supports (-moz-appearance:meterbar) and (background-blend-mode:difference,normal) {} 将针对 FF>30
@LukyVj：该网站的名称应该告诉您，它实际上不是针对浏览器的一种方式，而是一种黑客，恰好以这种方式工作。这有点像 2000 年代初期的 CSS hacks，随着时间的推移，随着浏览器的变化而停止工作。所展示的行为不是规范的结果，而是实现中的怪癖。它们最终将停止工作并且不受支持（例如，如果 Mozilla 无意中破坏了这一点，它们将不会向后弯腰使其再次工作）。

【解决方案2】：

如果你想这样做，你应该能够在 browserhacks.com 上找到一些东西，其中有一堆代码示例来解释如何使用 css 媒体查询获取浏览器，因此对于 IE，你可能会这样做。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

这是可行的，因为这些规则将应用于的唯一浏览器是 Internet Explorer

【讨论】：

【解决方案3】：

为了每个浏览器都有特定的 CSS，您可能需要使用浏览器特定的 hacks

查看以下文章

希望这会有所帮助。

【讨论】：

【解决方案4】：

http://www.paulirish.com/2009/browser-specific-css-hacks/

特定于浏览器的 hack 是它的解决方案！！！

【讨论】：

【解决方案5】：

如果你想使用条件 CSS： http://www.conditional-css.com/advanced

【讨论】：