针对特定设备尺寸而不相互交织答案

【问题标题】：Targeting specific device sizes without intertwining针对特定设备尺寸而不相互交织
【发布时间】：2014-01-07 12:21:55
【问题描述】：

我正在尝试分别定位设备，但最小和最大宽度相互交织。这是我的代码：

/* iPhone 4 (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {

  /* MOBILE MENU */
  #menuContainer .cart p, #menuContainer .menu p {
    font-size: 12px
  }
  /* Home Slider Text */
  #sliderContainer .slider p {
    font-size: 18px;
  }
  #Footer .top .left p:first-child {
    font-size: 17px;
  }
  #Footer .row p {
    font-size: 12px;
  }
}
/* Galaxy S3 (portrait and landscape) ----------- */
@media screen and (min-width : 360px) and (max-width : 640px) {
   /* MOBILE MENU */
  #menuContainer .cart p, #menuContainer .menu p {
    font-size: 20.4px;
  }
  /* Home Slider Text */
  #sliderContainer .slider p {
    font-size: 29px;
  }
  #Footer .top .left p:first-child {
    font-size: 32px;
  }
  #Footer .row p {
    font-size: 20.4px;
  }
}

所以 320 像素的 iPhone 看起来不错，但 480 像素的 iPhone 显示的是 Galaxy 媒体查询的字体大小。我希望每个特定的媒体查询都针对其各自的设备。这可能吗？如果有任何不清楚的地方，请告诉我。

【问题讨论】：

在您的媒体查询中使用基于 100% (16px) 的容器百分比和 em 间距会更好。像素不再意味着像素，例如 iPad mini 比实际的 iPad 小 40%，但它报告的宽度是常规尺寸一。加上视网膜设备是 2 兆像素。因此，在媒体查询中使用 em 间距可以达到预期的效果：专为视口设计。最好堆叠您的 CSS，以便在媒体查询之外存储共享样式。然后将 min-width 从小到大用于其他尺寸。
如果我使用“em”作为字体大小，它会根据屏幕分辨率自动调整吗？我尝试使用“vw”，但不支持很好。
您在 html 上基于 16px 使用 em 间距进行媒体查询，您可以在身体上使用像素，p、h1、h2... 或使用 EMS（如果您熟悉如何克服复合）。
如果您使用 em 媒体查询和 em 字体大小，您将不必为每个视口宽度调整字体大小。

标签： css media-queries

【解决方案1】：

测试大量设备并查看具体查询的好地方：
http://cssmediaqueries.com/target/

这是一个很好的媒体查询列表，可能也有用：
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

本文讨论了可能对您有所帮助的流畅布局：
http://www.campaignmonitor.com/guides/mobile/targeting/

这篇文章讨论了一个类似的问题： Media queries - targeting specific devices together

至于按设备类型定位特定设备，我认为这是不可用/不可能的。一般是通过屏幕大小来完成的。

我认为最好的选择是进行流畅的布局而不是硬像素大小。

【讨论】：

cssmediaqueries.com/target 很有用，但 Galaxy 系列的垂直宽度错误。它实际上是 360px :)

【解决方案2】：

更具体地编写您的媒体查询。

iPhone 4： @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)

银河 S4：

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

S3 的比率为 2。 S2的屏占比为1.5以下。

【讨论】：

这不会导致基于浏览器在设备上查看页面的不同结果吗？ “...每个浏览器使用不同的设置，因此在 Chrome 上查询 Galaxy S2 不适用于 Opera 或 Firefox Mobile。”来自此页面：link
WebKit-device-pixel-ratio 应该得到 Apple 和 Google 的支持，涵盖 iOS 和 Android。我指定的是设备宽度而不是屏幕宽度，所以它应该可以工作。但我自己还在学习媒体查询，所以我稍后会进一步研究。

【解决方案3】：

通过一些测试创建了我自己的查询，但效果很好并且几乎完美地定位。希望它对某些人有用。

/* TARGETS DEVICES FROM GALAXY S3+ HORIZONTAL */
@media (max-width: 767px) {
  /* CSS HERE */
}

/* TARGETS DEVICES FROM IPHONE 5S & IPHONE 4 HORIZONTAL */
@media (max-width: 568px) { 
  /* CSS HERE */
}

/* TARGETS DEVICES FROM GALAXY S3 VERTICAL and IPHONE 4S / 5 VERTICAL */
@media (max-width: 360px) {
  /* CSS HERE */
}

【讨论】：