Bootstrap 在平板电脑中无响应

Question

我的网站适用于除平板电脑以外的所有设备。我使用的是 bootstrap 4，下面我附上了响应式设计的媒体查询。

@media (max-width: 1024px) {
  div#about {
    width: 100% !important;
    margin-left: 0px !important;
  }
}

@media (max-width: 1024px) {
  div#about img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: auto !important;
    margin-bottom: 10px !important;
  }
}

@media screen and (max-width: 1024px) {
  div#about-section img {
    margin-bottom: 50px !important;
    width: 100% !important;
  }
}

Answer 1

你必须使用最小宽度，但你不能仅仅因为平板电脑的屏幕尺寸不同而只定位 1024px。

@media only screen and (min-width: 1024px) {
  div#about img {
      width: 100% !important;
      height: auto !important;
      display: block !important;
      margin: auto !important;
      margin-bottom: 10px !important;
  }

}

@media only screen and (min-width: 1024px) {
  div#about-section img {
      margin-bottom: 50px !important;
      width: 100% !important;
  }
}

推荐的屏幕尺寸和媒体查询以获得更好的体验。

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
 
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
 
}

Answer 2

您应该使用最小宽度，而不是最大宽度。我猜您的平板电脑的分辨率刚好高于 1024 像素，因此不适用于平板电脑。 既然你使用 Bootstrap，你应该使用Bootstrap breakpoints in Sass。这使您的布局与 Bootstrap 的其余部分保持一致。他们也不使用屏幕。 否则有stackoverflow question about this issue as well。