条件 CSS 和媒体查询答案

【问题标题】：Conditional CSS and Media Queries条件 CSS 和媒体查询
【发布时间】：2012-09-27 02:53:48
【问题描述】：

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="/assets/css/phone.css" />
    <link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="/assets/css/tablet.css" />

上面是我的条件 CSS，它在手机的一个样式表中加载，在平板电脑上加载另一个样式表，但是在计算机上查看时如何让它使用平板电脑样式表？

【问题讨论】：

您的平板电脑 css 文件也应该可以在桌面上运行，前提是桌面的最小宽度为 768 像素。您的 HTML 上还有其他样式表吗？

标签： html css media-queries

【解决方案1】：

确实是一个显而易见的答案，但媒体查询是唯一限制该样式表在平板电脑上使用的东西。

删除该媒体查询将打开它以在桌面（和任何其他适用的设备）上使用，同时牢记 CSS 特异性的通常规则；后面声明的样式会覆盖前面声明的样式；因此，如果您想要平板电脑样式覆盖普通桌面 CSS 文件，您确实必须稍后在文档中声明/导入/链接它。我想仍然在head 中，但是在您想要覆盖的其他人之后。

还值得记住的是，当然对于智能手机，但我不确定平板电脑，它们可能具有自定义 GUI 元素，其中包括表单元素。因此，从台式机到平板电脑的转换（即使是出于开发目的）可能不像您或我们希望的那样无缝。

【讨论】：

我不明白你的意思，我知道不应该这样做，但我需要为这项任务这样做。我需要一个支持手机的媒体查询和一个支持平板电脑和台式机的媒体查询，我该怎么办？
为什么要使用允许max-device-width of，可能（1），> 2560px 的媒体查询？您打算使用此媒体查询排除哪些设备？如果你不排除任何东西，或者特别指定一些东西，就没有理由使用媒体查询。 (1) 我没有想过，但我很确定有更大像素密度的显示器，我只是想不出一个，关闭我的头顶。
我真的应该先问这个问题，但是：您认为媒体查询（或删除它们）可能是解决方案，您面临什么问题？

【解决方案2】：

您拥有的代码应该已经在桌面上几乎可以工作，因为媒体查询“(min-device-width: 768px)”是 everything 宽度大于768px：平板电脑、台式机、撒谎的设备等。（当然，这是假设浏览器完全支持媒体查询，这可能并不比你希望的更常见。）

也就是说，我看到了四个可能的问题：
首先，一些手机将自己置于“手持”类别而不是“屏幕”类别，因此“仅屏幕......”将不匹配，并且根本不会向设备发送任何 CSS。一种可能的解决方案是指定“仅所有...”。（这也避免了打印时根本没有任何 CSS 的问题。）

其次，为了获得最佳性能，您可能希望将所有 CSS 和媒体查询放在一个文件中（使用 @media ...[query]... { CSS statements; } 块）而不是在 HTML 语句上指定媒体查询所以有多个 CSS 文件。每个 CSS 文件——包括那些被媒体查询禁用的文件——都会被下载；这可能会占用大量网络带宽。

第三，对于根本不会被分类的不可避免的设备没有“后备”。大多数情况下，每个网页都应该包含一个 CSS 块或一个

第四，以像素为单位的设备尺寸通常会被超高密度显示器或新的“视口”严重扭曲。因此，根据您的测试，一些智能手机似乎是平板电脑。设备像素密度可以容纳在您的逻辑中。 “视口”可以并且应该由“元”语句控制，因为通常的默认值无论如何都会使其“工作”，但代价是通常不能正确处理更智能的响应式布局。

（有关缺乏对媒体查询、媒体查询可变性和密度问题的支持的替代方法，请参阅http://www.ckollars.org/alternative-to-media-queries.html）

【讨论】：