我试图分别定位设备,但最小和最大宽度相互交织。这是我的代码:
/* 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 媒体查询的字体大小。我希望每个特定的媒体查询都针对其各自的设备。这可能吗?如果有任何不清楚的地方,请告诉我。
最佳答案
测试大量设备并查看具体查询的好地方:
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
至于按设备类型定位特定设备,我认为这不可行/不可能。通常通过屏幕尺寸来完成。
我认为最好的选择是进行流畅的布局而不是硬像素大小。
关于css - 针对特定的设备尺寸而不相互缠绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20673119/