html - 图片和媒体查询

我是响应式设计的新手，正在为旧手机设计一个以240px宽度开始的网页，并从那里开始建立。

在我的横幅图像（是PNG）上，最好执行以下操作：
1）从最大图片开始，然后针对每个媒体查询缩小图片？
要么
2）从小横幅开始，然后为每个断点显示更高分辨率的文件？

拉伸和缩小图像对于矢量图形来说似乎不错，但在某些gif图像和其他图像上，它看起来很丑陋。

因此，我不确定是否应该加载一个我操纵的横幅图像，或者是否应该在特定分辨率触发点加载至少3张图像（手机，平板电脑，台式机尺寸）。

谢谢。

最佳答案

总体而言，我想说的是使用媒体查询来找到屏幕的大小，并使用最合适的图像。

CSS示例：

.banner{
    background: url('banner-1024.png') no-repeat;
    background-size: 100%;
}

@media all (max-width: 400px){
  .banner{
    background-image: url('banner-400.png');
  }
}

@media all (max-width: 900px){
  .banner{
    background-image: url('banner-900.png');
  }
}

但是，如果您不希望在移动设备上看到很多观众，没有时间创建重新调整大小的图像，或者只想要最少的CSS，那么使用从未有太多问题适用于所有设备的大图像。

如果是这种情况，那么只需使用代码的前四行，您就可以顺利进行了。

关于html - 图片和媒体查询，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30880990/