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