媒体查询不适用于移动设备 - 电话

Question

我在这里查看了类似的问题，并尝试了他们所展示的内容，人们已经解决了问题，但我没有运气。

我有一个基本的引导程序 4.4.1 CSS 文件，然后还有我自己的自定义 CSS 文件。 在它的底部，我插入了媒体查询：

@media screen and (min-width:176px) and (max-width: 459px) {
divboxshadow_rt {
    width: 320%; 
    float:left;
    background-color: #FFFCCC;
}
body {
    width: 100%;
    background-color: #fff;
 }
 .col col-md-8 px-md-6 { 
 width:80%; float:left
 }
}
@media (min-width:460px) and (max-width: 767px) {
 
.col-sm-3.col-xs-12{ width:50%; float:left}
.col-sm-4.col-xs-12{ width:50%; float:left}
.col-sm-6.col-xs-12{ width:50%; float:left}

}

这实际上在开发控制台中工作，在我的一个浏览器中以响应模式查看它，尤其是 iPhone 风格之一。我无意使用这种微不足道的 bkg 颜色，但它确实在我改变它时显示出来。 我已经在股票浏览器和 Chrome 中尝试了我的网站。我有 Android、Galaxy Samsung 9。

我需要使用一些代码覆盖来让它工作吗？还是这里的某些东西看起来不正确，尽管它现在在两个开发控制台（Chrome 和 Avast）中看起来都是正确的？

实际上，我需要 col 宽度或 body 宽度，在电话模式下要宽一些。 div 框弄错了。

欢迎大家给我任何反馈。我添加了另一个课程并在下面稍微修改了我的问题。我不能让那个类覆盖它的原始类。我这样做不正确吗？即用媒体查询版本覆盖 divboxshadow_rt？现在其实很近了。 我有

   <div class="col col-3 .px-md-6 divboxshadow_rt " >

我正在尝试/需要使用 col col-md-8 覆盖 col col-3，因为插入到上面小型设备的媒体查询中。它不会覆盖它吗？ col col-3 保持不变，在我的响应测试中不受影响。也许我没有正确接近它，但我认为上面的媒体查询会覆盖设置。不？同样，欢迎任何反馈。

Answer 1

// xs 断点不需要媒体查询，因为它实际上是@media (min-width: 0) { ... }

你只需要写 col-12 而不是 col-xs-12

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

您只在自定义 css 中覆盖宽度和浮动样式