<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 特异性的通常规则；后面声明的样式会覆盖前面声明的样式；因此，如果您希望平板电脑样式覆盖普通桌面 CSS 文件，您确实必须稍后在文档中声明它/导入它/链接它。仍然在head，我想，但是在你想要覆盖的其他人之后。
还值得记住的是，当然对于智能手机，但我不确定平板电脑，它们可能具有自定义 GUI 元素，其中包括表单元素。因此，从台式机到平板电脑的转换（即使是出于开发目的）可能不像您或我们希望的那样无缝。
您拥有的代码应该已经非常适用于台式机，因为媒体查询“（min-device-width：768px）”是宽度大于768px的所有东西：平板电脑，台式机，撒谎的设备等。（当然，那是假设浏览器完全支持媒体查询，这可能比你希望的更频繁。）
也就是说，我看到了四个可能的问题：
首先，一些手机将自己置于“手持”类别而不是“屏幕”类别，因此“仅屏幕......”将不匹配，并且根本不会向设备发送 CSS . 一种可能的解决方案是指定“仅所有...”。（这也回避了根本没有任何 CSS 用于打印的问题。）
其次，为了获得最佳性能，您可能希望将所有 CSS 和媒体查询放在一个文件中（使用 @media ...[query]... { CSS statements; } 块）而不是在 HTML 语句上指定媒体查询等多个 CSS 文件。每个 CSS 文件——包括那些被媒体查询禁用的文件——都会被下载；这可能需要大量的网络带宽。
第三，对于根本不会被分类的不可避免的设备没有“后备”。大多数情况下，每个网页都应该包含一个 CSS 块或一个 <link... 语句，没有媒体查询来提供默认/备用 CSS，然后其他 CSS 应该构建在该 CSS 之上或覆盖它。
第四，以像素为单位的设备尺寸经常被非常高密度的显示器或新的“视口”严重扭曲。因此，根据您的测试，一些智能手机似乎是平板电脑。设备像素密度可以容纳在您的逻辑中。“视口”可以而且应该由“元”语句控制，因为通常的默认值无论如何都会使其“工作”，但代价是通常不能正确处理更智能的响应式布局。
（有关缺乏对媒体查询、媒体查询可变性和密度问题的支持的替代方法，请参阅http://www.ckollars.org/alternative-to-media-queries.html）