如何将这些媒体查询合并到一个？

Question

好的，所以这是一个愚蠢的问题，我正在熄灯或者其他什么，但是我如何使用这种媒体并使其成为可以自动了解屏幕尺寸的？

@media (max-width: 600px) {
  .wm-booking-enduser-logo-bg {
    max-width:600px;
  }
}
@media (max-width: 500px) {
  .wm-booking-enduser-logo-bg {
    max-width:500px;
  }
}
@media (max-width: 400px) {
  .wm-booking-enduser-logo-bg {
    max-width:400px;
  }
}
@media (max-width: 300px) {
  .wm-booking-enduser-logo-bg {
    max-width:300px;
  }
}
@media (max-width: 200px) {
  .wm-booking-enduser-logo-bg {
    max-width:200px;
  }
}

Answer 1

从它看起来，您要做的就是让.wm-booking-enduser-logo-bg自动扩展到视口的整个宽度。如果此元素不是限制大小的父元素的子元素，则只需使用以下内容（不进行任何媒体查询）：

.wm-booking-enduser-logo-bg {
    max-width: 100%
}

如果这不适合您，请添加评论。

修改：请注意max-width与width不同。后者明确设置宽度（即 .wm-booking-enduser-logo-bg将始终为全宽）。前者的意思是“不要将此元素拉伸超过它的常规尺寸，但如果它大于某种尺寸，则缩小它。”