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

Posted 2023-03-06

【中文标题】媒体查询不适用于移动设备 - 电话

【英文标题】：media query does not work correctly for mobile device - phone

【发布时间】：2021-04-28 05:18:27

【问题描述】：

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

我有一个基本的引导程序 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 保持不变，在我的响应测试中不受影响。也许我没有正确接近它，但我认为上面的媒体查询会覆盖设置。不？同样，欢迎任何反馈。

【问题讨论】：

我认为 screen size 与源代码 width 和 height size

不兼容

【参考方案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 中覆盖宽度和浮动样式

【讨论】：

好的，谢谢。根据我上面的原始问题，我发现我只能用 body 属性覆盖附加到 div 的当前类。但是假设我在 div 上有类“divboxshadow_rt”——我不会将它添加到上面的媒体查询中以进行电话设置，并且它应该覆盖原来的吗？我将对其进行编辑以显示示例。

嗨 Nikhil，它并没有完全做到这一点。为了让它正常工作，我最终做的是预先构建 html 类 css 参考。它可能确实会读取媒体查询，但我必须在 HTML 标记中对每个类名进行硬编码。不过，感谢您的提示，因为它也可能对修复有所帮助！