如何确保使用媒体查询分配给移动视图的样式不会被桌面视图继承？

Question

我正在使用 React 制作网络应用程序，我从 API 获取数据并将其显示在页面上。我是响应式网页设计的初学者，所以我正在尝试媒体查询。所以对于移动视图，即最小宽度：320px，我想要一个 div 有 display:flex 并且我已经将行和列分配给它的子组件并且一切看起来都很好。但是当我尝试在桌面模式下查看它时，它仍然是一个弹性容器。我尝试明确调用桌面媒体查询并将显示分配给块，但仍然没有变化。

@media only screen and (min-width:320px){

  .form{
    grid-template-rows: auto 1fr auto;
    align-items: center;
  }

  .input{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .movie-card{
    padding: 1rem 2rem;
    border-radius: 10px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.25);
    margin-bottom: 2rem;
    background-color: white;
    color: black;
    display: flex;
    flex-direction: column;
  }

  .movie-top{
    display: flex;
    flex-direction: row;
    word-wrap: break-word;
  }
  .movie-top-left{
    display: flex;
    flex-direction: column;
  }

  .movie-top img{
    width:150px;
    border-radius: 10px;
  }

  .card--title{
    margin-bottom: 0.5rem;
    font-size: 2rem;
  }

}

这是移动视图的媒体查询，对于桌面我不希望电影卡是一个弹性容器，但通过检查元素显示它是一个弹性容器，它看起来也不同

Answer 1

您在媒体查询中使用了最小宽度，这意味着大于 320px 的所有内容都将分配 css。使用最大宽度

Answer 2

使用最大宽度运算而不是最小宽度。这将确保宽度小于小于 320px 的设备将具有一些指定的样式，如您声明的那样，而其他设备将具有浏览器默认样式，如果没有指定其他 CSS或其他 CSS（如果指定）。

如何确保使用媒体查询分配给移动视图的样式不会被桌面视图继承？

How to make sure that the styles assigned to mobile view using media query are not inherited by by desktop view?

css

responsive-design