响应式设计的媒体查询未在桌面上触发答案

【问题标题】：media query for responsive design not triggered on desktop响应式设计的媒体查询未在桌面上触发
【发布时间】：2020-05-14 23:56:45
【问题描述】：

我正在尝试创建媒体查询，将 css 设置在与移动 css 不同的桌面上。无论桌面上的窗口有多小，我都希望桌面 css 与移动 css 不同。我认为将 min-width 设置为 800px 会强制执行第一个媒体查询。

html,body{
    min-width:800px;
}

@media only screen and (min-width: 800px){
  #flex{
    display:flex;
  }
  
  .item{
    font-size:3vw;
    color:blue;
    width:30vw;
    height:250px;
    border:solid black 2px;
  }
}

@media only screen and (max-device-width: 799px) {
    html,body{
        min-width:unset;
        width:100vw;
    }
    
    #flex{
      display:flex;
      flex-direction:column;
      color: red;
    }
}

<div id='container'>
    <div id='flex'>
      <div class='item'>some text a</div>
      <div class='item'>some text b</div>
      <div class='item'>some text c</div>
    </div>
</div>

【问题讨论】：

你的班级是item，但你的选择器使用items。除此之外，媒体查询在您的示例中有效。
感谢您发现错字，但当屏幕小于 800 像素时，第二个媒体查询会在桌面上运行。我该如何防止呢？
第二个媒体查询将无法在桌面上运行，除非实际的物理显示宽度小于 799 像素。由于您使用的是max-device-width 而不是max-width，因此调整浏览器大小不会有任何影响。是什么让您认为查询是在桌面浏览器上触发的？
当我将桌面浏览器窗口设置为小于 800 像素时，会触发第二个媒体查询。我该如何防止呢？我想根据我是在桌面还是移动设备上运行一组不同的 css 指令
当您调整浏览器大小时，第二个查询没有被触发。我已将 color: red 添加到您的第二个查询中。看看文字是如何永远不会变红的？

标签： css media-queries responsive

【解决方案1】：

html,body{
    min-width:800px;
}


  #flex{
    display:flex;
  }
  
  .item{
    font-size:3vw;
    color:blue;
    width:30vw;
    height:250px;
    border:solid black 2px;
  }


@media only screen and (max-device-width: 799px) {
    html,body{
        min-width:unset;
        width:100vw;
    }
    
    #flex{
      display:flex;
      flex-direction:column;
      color: red;
    }
}

<div id='container'>
    <div id='flex'>
      <div class='item'>some text a</div>
      <div class='item'>some text b</div>
      <div class='item'>some text c</div>
    </div>
</div>

【讨论】：