针对具体设备大小没有交织

问题描述：

我试图分别针对设备，但最小和最大宽度相互交织在一起。这里是我的代码：针对具体设备大小没有交织

/* 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像素则显示了银河传媒查询的字体大小。我希望每个特定的媒体查询都能够定位其各自的设备。这可能吗？如果有什么不清楚，请告诉我。

对于您的媒体查询，使用基于100％（16px）的容器百分比和em间距会更好。像素不再意味着像素，例如iPad mini比实际的iPad小40％，但它报告的是普通尺寸的宽度。加上视网膜设备是200万像素。因此，在媒体查询中使用em间距可以提供预期的结果：为视口设计。最好堆叠CSS，以便在媒体查询之外，存储共享样式。然后对其他尺寸使用从小到大的最小宽度。 – Christina

如果我使用“em”作为字体大小，它会根据屏幕分辨率自动调整。我尝试使用“vw”，但它不被很好地支持。 – Shivam

您可以在您的html上使用基于16px的媒体查询的em间距，您可以使用您身体上的像素p，h1，h2 ...或使用EMS（如果您熟悉如何克服复合）。 – Christina

答

通过一些测试创建了我自己的查询，但效果很好，目标几乎完美。希望这会对一些人有用。

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

答

真棒现场测试多种设备，看看具体的查询：
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

至于针对特定设备的类型的设备，我不认为这是可用/可能的。它通常通过屏幕大小完成。

我认为最好的选择是做一个流畅的布局，而不是硬像素大小。

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

答

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

iPhone 4：仅 @media屏幕和（-webkit分钟设备像素比：1.5）中，只有屏幕和（最小 - 设备的像素比：1.5）

银河S4：

@media屏幕和（装置宽度：320像素）和（设备高度：640像素）和（-webkit设备像素比：3）

的S3将具有2 的的比例S2的比例是1.5和更小的屏幕。

这不会导致基于浏览器tat的不同结果是查看设备上的页面？ “...每个浏览器使用不同的设置，因此在Chrome浏览器上查询Galaxy S2并不适用于Opera或Firefox Mobile。”来自本页：[link]（http://cssmediaqueries.com/target/） – Phlume

WebKit设备像素比例应该由Apple和Google支持iOS和Android。而我指定设备宽度而不是屏幕宽度，所以它应该工作。但我仍然在学习媒体问题，所以稍后我会进一步研究。 – davidcondrey

针对具体设备大小没有交织

相关推荐