图像和媒体查询答案

【问题标题】：Images and media queries图像和媒体查询
【发布时间】：2015-09-02 01:30:57
【问题描述】：

我是响应式设计的新手，我正在为旧手机设计一个宽度为 240 像素的网页，然后从那里开始构建。

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

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

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

谢谢。

【问题讨论】：

我会说玩它，看看什么对你有用。也许说一个大、中、小，然后在你的媒体查询中输入它们，看看它们是如何反应的，然后选择最适合你的设计。大多数时候，我会使用大图像并使用 html 和媒体查询来缩小它。

标签： html css responsive-design media-queries image-scaling

【解决方案1】：

至少使用几张图片对我来说效果很好，手机（iOS、Android、Opera Mini）似乎会选择其中一张来下载，而不需要桌面和中屏设备。我从一个桌面图像开始，性能很糟糕。然后为每个媒体查询尝试了一些较小的（在 240 像素处质量稍差；））。它的速度要快得多。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

阿齐，谢谢。这就是我的想法。不过，我不确定这是否是在浏览器窗口移动时调整图像大小的最佳做法。我的主要标题是光栅图像。我注意到当我尝试通过增加窗口大小来拉伸它时，它看起来有点糟糕，但是当窗口调整大小时，其余的文本是流畅的并且看起来不错。我见过其他不太流畅的响应式设计。在您到达断点之前，它们看起来有点僵硬，然后一切都跳到位。从 PS 导出多个 IMG 似乎更简单。
简而言之，当通过拖动边缘调整视口大小时，光栅图像在尺寸之间的流动似乎不是很好。它在高分辨率下会变得像素化，或者在看小分辨率时会变得过于拥挤。
我已经做了一段时间的响应式设计，而且我曾经担心它在重新调整大小时的外观。但是请考虑一下，几乎没有人访问您的页面会在加载后重新调整其大小。
这是一个很好的观点。我想当人们想要拖动窗口时，我希望它看起来不错，比如说一半大小，这样他们就可以在他们同时处理其他事情时让它保持打开状态。再说一次，我怀疑这将在手机上完成，尤其是在我的网站上，这将是非常繁重的文本，可能最适合桌面。
Azzie Rogers，新的 HTML 标签怎么样？