时间戳

首页 > 解决方案 > 调整窗口大小时不响应，但在不同设备上使用 Google Inspector 工具

css - 调整窗口大小时不响应，但在不同设备上使用 Google Inspector 工具

问题描述

我一直试图弄清楚这一点，只是看不出有什么问题。太令人沮丧了，但想看看是否有人能明白为什么在调整浏览器窗口大小时，网站没有响应。但是，在 Chrome 和 Firefox 的检查器工具中，我可以看到网站对不同设备尺寸的响应。我一直在使用@media screen (max-width) NOT device-width，我知道这会导致这个问题。感谢您的帮助！ 

/***MEDIA QUERIES*****/
@media screen (max-width: 880px) {
  #location-icon {
    margin: 5px 10px 90px 0;
  }
}

@media screen (max-width: 760px) {
  .first-footer {
    flex-direction: column;
  }

  #location-icon {
    margin: 5px 10px 40px 0;
  }

  .copyright {
    margin: 0;
  }

  .first-footer {
    padding-bottom: 0;
  }
}

@media screen (max-width: 375px) {
  .intro {
    flex-direction: column;
  }

  .intro img {
    width: 100%;
  }

  .intro div {
    padding-right: 0;
    padding-bottom: 20px;
    text-align: center;
  }

  .intro button {
    margin: 40px 0;
  }

  .logo-button button {
    padding: 20px;
    width: 200px;
  }

  .logo-button img {
    width: 100px;
  }

  .box {
    flex-direction: column;
    padding: 30px 40px;
    text-align: center;
  }

  .mid-text {
    order: 2;
    padding: 0;
  }

  #location-icon {
    margin: 5px 10px 100px 0;
  }

  .list1 {
    margin: 30px 0 0 0;
  }

  .list2 {
    margin: 0;
  }

  .icons {
    align-self: center;
    text-align: center;
    margin-top: 30px;
  }

  .copyright {
    margin: 0;
  }

  .first-footer {
    padding-bottom: 0;
  }
}

标签： cssresponsive-designmedia-queriesresponsive

解决方案

首先，当您编写具有以下两个条件的媒体查询时，您需要添加“and”：

@media screen and (max-width: 880px)

但是，它不起作用的原因是由于您在 body 标记中的容器类。如果您删除它，它将解决您的大部分问题，因为在这种情况下没有理由使用网格

推荐阅读