媒体查询未申请所需的屏幕尺寸答案

【问题标题】：Media query not applying for desired screen size媒体查询未申请所需的屏幕尺寸
【发布时间】：2020-12-31 00:25:48
【问题描述】：

我正在为某些移动屏幕创建移动设计，因此我想将我的样式应用于 275 像素宽到 812 像素的屏幕。目前由于某种原因，为此媒体查询定义的样式从 303 到 812 宽度应用，但是波纹管他们没有任何影响。我的媒体查询对于我想要实现的目标是否错误？这是它的外观：

@media screen and (min-width:275px) and (max-width:812px) {}

这是我在 html 中的视图端口行：

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

【问题讨论】：

【解决方案1】：

您的代码看起来不错；它在这里工作得很好。我不确定您要达到什么目的，但媒体查询在指定的最小宽度以下（或在本例中为 275 像素以下）将无法工作。它将绑定到您设置的约束。

@media screen and (min-width:275px) and (max-width:812px) {
  body {
    background: blue;
  }
}

【讨论】：

【解决方案2】：

如果您想要实现的是将特定样式应用于 275px 到 812px 的屏幕宽度：

@media screen and (min-width:275px) and (max-width:812px){

这是正确的，我已经在 chrome 开发工具中对其进行了测试，看起来还不错，使用该代码，它可以正确应用从 275px 到 812px 的样式。

可能问题出在其他媒体查询中

【讨论】：