将小型手机媒体查询与引导媒体查询相结合

Question

我正在使用使用 max-width 的标准 bootstrap 3 媒体查询，但也想包括一些用于较小的手机和平板电脑，但不知道如何让它们在各自的设备上工作。

例如，我知道这可以处理大多数手机：

@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) {

Answer 1

我建议您的规则更具体（例如，您的 iPhone 5 的min-device-width 可能大于以前的最大值等等。），或者以this 答案建议的方式使用min-width .关于使用min-width 和min-device-width，或许也可以阅读this。