我正在使用使用max-width的标准bootstrap 3媒体查询，但也希望包含一些用于较小的手机和平板电脑，但无法弄清楚如何让它们同时适用于各自的设备。< / p>
例如我知道这可以处理大多数手机：
@media (max-width:767px)
但是，如果我想要单独查询说，iphone 5就像这样
@media only screen and (min-device-width : 320px) and (max-device-width : 568px)
其中一个或另一个都有效。
我已经尝试更改顺序（因为我知道后者将覆盖之前的顺序）并添加“！important”声明，但似乎没有任何效果。
在这个特定的实例中，我有一系列链接，下面有一个按钮，需要让它们之间的填充更小，所以它们都适合较小的屏幕（在这个例子中是iPhone 5，但我想有一个iPhone 4等的第三个），但不能在较大的一个上靠近。
有一种简单的方法吗？
提前感谢您的任何帮助。
这是我尝试3种不同尺寸的粗略示例。
/ iPhone 4和其他小型手机 /
@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.topic-link h5 {
padding-bottom:12px;
}
}
/ iPhone 5和其他中型手机 /
@media only screen and (min-device-width: 320px) and (max-device-width: 568px){
.topic-link h5 {
padding-bottom:18px;
}
}
/ iPhone 6和其他大型手机 /
@media (max-width:767px){
.topic-link h5 {
padding-bottom:24px;
}
}
这是第2次尝试：
/ iPhone 4和其他小型手机 /
@media only screen and（min-width：320px）and（max-width：480px）{
/ iPhone 5和其他中型手机 /
@media only screen and（min-width：320px）and（max-width：568px）{
/ iPhone 6和其他大型手机 /
@media only screen and（min-width：375px）and（max-width：667px）{