我有不同的CSS文件用于不同的布局（手机和平板电脑）。由于我在平板电脑视图中添加了样式，因为我的 Samsung Note 8的分辨率为1200x800 。
但是当我在分辨率为1920x1080 的三星Galaxy tab750上运行此应用程序时，由于我根据Note 8调整了字体和布局，因此我使用较小的字体获得较小的布局。
所以我得到了添加另一个CSS文件来处理它的建议。接下来，当我们的QA尝试在iPad上运行应用程序（ Retina Display 2048x1536 ）时，第三个CSS再次显得很小。
2012年，有一款平板电脑的分辨率为2,560x1,600。 2013年，至少有六个。我怀疑2014年我们会看到更多（http://ces.cnet.com/8301-35302_1-57615742/tablets-at-ces-2014-the-calm-before-the-storm/#ixzz2nhc1BlAw）。
关于这篇文章Responsive Web Design and high resolution displays (iPhone 4/5)，
我们将使用媒体查询来获取所需的分辨率，
/* Large desktop */
@media (min-width: 1200px) {
font-size: 18px;
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
font-size: 16px;
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
font-size: 14px;
}
/* Landscape phones and down */
@media (max-width: 480px) {
font-size: 12px;
}
所以我担心的是我们是否可以处理这种情况，而不会添加越来越多的CSS和媒体查询，如果是这样，请建议。
答案 0 :(得分：1)
检测高密度/视网膜设备a number of media-query based ways。
我个人倾向于使用它，这似乎捕获了绝大多数设备：
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max--moz-device-pixel-ratio: 2),
screen and (min-device-pixel-ratio: 2) {}
虽然完全符合个人喜好！
请记住 - 在大多数情况下 - “高密度”屏幕（而不仅仅是高分辨率）会将自己报告为用于媒体查询的非高清分辨率。
例如：Retina Apple iPad的实际屏幕分辨率为2,048 x 1,536，但仍然报告为1,024 x 768px。因此，相同的屏幕宽度/高度媒体查询将捕获iPad 4（视网膜）作为iPad 2 - 除了在较旧的iPad的情况下稍微模糊一点 - 将看起来相同。
如果您愿意，可以将上面包含的媒体查询与宽度/高度相结合，以便在专用高清设备上获得更精细的目标。
一个非常重要的例外是运行Windows 8 Mobile的高密度显示设备，其known bug正确报告了视口。