html - 图像和媒体查询

Question

我是响应式设计的新手，我正在为旧手机设计一个宽度为 240 像素并以此为基础的网页。

在我的 PNG 横幅图片上，最好是:1)从我最大的图像开始并针对每个媒体查询缩小它？或者2) 从一个小横幅开始，然后为每个断点显示一个更高分辨率的文件？

拉伸(stretch)和收缩图像对于矢量图形来说似乎很好，但在某些 gif 和其他图像上它看起来相当丑陋。

所以我不确定是否应该加载一个我操纵的横幅图像，或者我是否应该在特定分辨率触发点加载至少 3 个图像(手机、平板电脑、桌面大小)。

谢谢。

Answer 1

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

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，我从来没有做过太多仅对所有设备使用大图像的问题。

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