css - 针对特定的设备尺寸而不相互缠绕

Question

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

/* 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;
  }
}

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

Answer 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

至于按设备类型定位特定设备，我认为这不可行/不可能。通常通过屏幕尺寸来完成。

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