css - 响应式@media 查询以删除样式声明

Question

我不熟悉@media 查询，我想要完成的是在浏览器 View 缩小到特定分辨率以下时，响应式地删除/更改某些 CSS，或者查看页面的移动设备也在下方相同的指定分辨率。

我需要 .side 来移除 float: left;位置:固定； width: 150px; 当宽度分辨率低于 500px 时，.main 移除 border-left: 1px solid #000;边距:0 0 0 170px;

.side {
  display: block;
  float: left;
  overflow: hidden;
  position: fixed;
  width: 150px;
}

.main {
  border-left: 1px solid #000;
  margin: 0 0 0 170px;
}

感谢任何帮助或解释。

Answer 1

这样就可以了

@media only screen and (max-width: 500px) {

    .side {
      float: none;
      position: static;
      width: auto;
    }

    .main {
      border-left:0;
      margin: 0;
    }
}