Bootstrap 4中的哪种媒体查询将定位到Google的Nexus 5?

时间:2019-02-17 12:57:47

标签: twitter-bootstrap responsive-design media-queries nexus-5

在Bootstrap框架中,我似乎无法让Nexus 5响应我的媒体查询。

我曾经经历过stackoverflow,因为我认为这可能会在其他地方弹出,但是类似的答案我并不十分了解。我只想使用CSS定位Nexus 5。在考虑样式表时,我似乎仍未完全理解屏幕大小以及如何解释屏幕大小。

从我收集的数据来看,Nexus 5的屏幕设置为1080 x 1920像素。我以为我的标准媒体查询之一可以针对此目标。在响应模式处于活动状态的桌面浏览器中进行测试会吸引我发布的任何样式;关系本身,但是,不会接受我可以识别的任何媒体查询。

我在下面列出的所有媒体查询中都设置了一种测试样式,红色边框为1像素:

@media (max-width: 499px) {
    .carousel-caption {
        border: 1px red solid !important;
    }
}
@media (max-width: 575.80px) {
    .carousel-caption {
        border: 1px red solid !important;
    }
}
@media (min-width: 576px) {
    .carousel-caption {
        border: 1px red solid !important;
    }
}
@media (min-width: 768px) {
    .carousel-caption {
        border: 1px red solid !important;
    }
}
@media (min-width: 992px) {
    .carousel-caption {
        border: 1px red solid !important;
    }
}
@media (min-width: 1200px) {
    .carousel-caption {
        border: 1px red solid !important;
    }
}
@media (min-width: 1900px) {
    .carousel-caption {
        border: 1px red solid !important;
    }
}

此样式不会在Nexus屏幕上呈现。我很茫然。这里肯定缺少基本的东西。

0 个答案:

没有答案