css媒体查询图片变小

在网页设计中，图片占据着重要的位置。然而，当用户在不同的设备上访问网站时，图片可能会失去其原有的效果。为了解决这个问题，我们可以使用CSS媒体查询来让图片变小。

@media only screen and (max-width: 768px) {
  /* 在屏幕宽度为768px及以下时，将图片宽度设置为50% */
  img {
    width: 50%;
  }
}

上述代码中，我们使用了@media媒体查询来判断屏幕的宽度是否小于或等于768像素。如果条件成立，我们将图片的宽度设置为50%。这将确保图片在较小的设备上仍然能正确显示。

除了设置图片宽度之外，我们也可以使用媒体查询来设置其他样式，如字体大小、背景颜色等。这将帮助我们为不同设备的用户提供更好的用户体验。

总之，使用CSS媒体查询是保证网页在各种设备上能够正常显示的重要步骤。合理运用媒体查询可以帮助我们充分利用各种设备的屏幕大小，将网页设计得更具有吸引力。