Question

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

在我的横幅图片上，这是一张PNG，最好是： 1）从我最大的图像开始，缩小每个媒体查询？要么 2）从一个小横幅开始，然后为每个断点显示更高分辨率的文件？

拉伸和缩小图像对于矢量图形似乎很好，但在某些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，我就是对于所有设备使用大图像从来没有太大的问题。

如果情况确实如此，那么只需使用前四行代码就可以了。你好了。

Answer 2

使用至少一些图片对我来说很有用，手机（iOS，Android，Opera Mini）似乎选择下载，而不需要桌面设备和中型屏幕设备。我开始使用一个桌面图像，性能太可怕了。然后为每个媒体查询尝试了一些较小的（在240px时质量稍差一点;））。它的速度要快得多。

图像和媒体查询

2 个答案: