CSS背景图像的简单响应

本文设有很多，最理想的解决方案，响应图像只是其中之一。我们建议您查看不同的方法，然后再选择一个特定的响应图像解决方案，包括这两个：如何避免重复下载响应图像中选择响应图像解决方案。

大家都在谈论的的srcset属性和元素，以及服务器端的技术，如响应性的Web设计+服务器端组件(RESS)如新的HTML5标准，得出的结论是简单，静态的，你会原谅网站不能支持响应的图像。这一结论可能为时过早，但是。其实，有一个简单的，简单的方法来提供响应的图像，支持所有当今的Web浏览器：CSS背景图像。

然而，这种方法有一定的局限性，并在所有情况下，这是行不通的。但是，如果你的要求并不复杂，如果你愿意做出额外的努力，以确保您的图像访问，CSS背景图像可能是你所需要的。

在这篇文章中，我们将着眼于CSS背景办法在以下几个步骤：

首先，我们要检讨的目标和要求，为响应图像。

然后，我们将看到CSS媒体查询如何可以帮助确定我们的用户设备的重要特征。

我们将探讨的关键CSS 背景图像，让我们应对这些特性的属性。

我们将着眼于优化弥补响应集的各个图像的战略。

我们将研究这种方法的局限性，在许多情况下，也有简单的技术来克服它们。

最后，我们将介绍这种方法的问题，还没有解决方法。

注：这种方法需要明确的控制您的网站的样式表，以及它的HTML标记。如果您的网站依赖于一个内容管理系统(CMS)，你可能没有足够的控制这些方面的网站。

极品响应图像

响应图像响应的Web设计(RWD)，设计由伊桑马科特战略，以应对惊人的普及，移动设备浏览网页的重要组成部分。伊桑认识，以前的最佳实践方案-为不同类型的设备开发单独的网站-根本无法应付各种惊人的设备，网络用户可能采用访问我们的网站建设。

RWD采取完全不同的方法：创建一个单一的网站，但该网站的识别和应对它的上下文。如果用户有一个宽屏幕的桌面浏览器，例如，允许网站内容分布在多个列。然而，在智能手机上重新排列的内容局限于单个列。

在许多情况下，这就是停止响应的设计 - 简单的调整布局和演示。如果这一切，但我们认为，我们没有履行响应式设计的目标，我们卖我们的用户短。

真正响应用户的情况下，需要考虑各方面的经验，设计通常包括图像。对于现实生活中的例子，考虑一个网站如contfont.net。，单页网站，有一个主要的形象和一组典型的HTML，样式表，字体，和JavaScript文件。

该网站看起来很华丽的超高分辨率显示器的电脑上，因为它包括一个高分辨率版本的主要图像。交付该图像文件不便宜，但其1940×1229像素使图像压缩后大小为446 KB。

该网站可以为所有用户使用相同的图像文件，而不妥协的视觉体验。较小的设备，如智能手机上的Web浏览器会调整它的大小以适合显示。虽然这种做法会保持网站的视觉吸引力，整体用户体验将受到显着。

在iPhone上，290×183像素的图像大小为18 KB，452 KB，1940×1229像素的图像在MacBook Pro上的大图看起来相同。

用户浏览网站上说，上一代的智能手机是什么意思?对于用户，290×183像素图像的大小为18 KB，看起来较大的版本相同。没有一个负责任的形象的方法，该网站将强制用户下载一个额外的429 KB的数据，完全是浪费。这多余的不仅仅是学术上的，它具有重大影响网站的加载时间。智能手机用户可能访问的网站超过2 Mb / s的一个典型的3G连接。未能提供一个负责任的形象，增加了加载时间从1.3秒到3秒，明显超过一倍!

原图需要3.0秒来加载在3G网络上，而1.3秒为一个负责任的形象。大图。

一个负责任的首要目标图像的方法很简单：只提供用户的设备实际上可以使用的像素。

识别用户的上下文

如果我们的网站去应对我们的用户的情况下，我们需要一种方法来标识这方面。今天，CSS提供最有效的方式来区分不同的设备。CSS为我们提供了两个关键问题的答案：什么是用户的显示器的大小?显示支持视网膜式图像?

CSS工具，为我们提供了这个信息是一个媒体查询。媒体查询定义一组CSS样式属性仅适用于具有特殊品质的设备。本来，媒体查询是有限的媒体类型。其中盲人点字(盲文触觉反馈装置)，语音(语音合成)，TTY(设备等宽字体，如电传打字机)和TV(电视类型的设备，例如CSS规范中定义了大量分辨率低和没有滚动)。目前，只有两种媒体类型，大多数浏览器都支持打印(印刷，分页材料)和屏幕(电脑屏幕)。

扩大了使用CSS3媒体查询，但是，通过让样式表来指定特定功能的设备以及媒体类型。的功能可以包括在屏幕上的设备的情况下，显示的许多特征，包括其宽度，方向，分辨率和像素比例。这些功能提供的信息，我们需要选择一个合适的响应图像。

这里媒体查询如何可以帮助我们解决了上一节的窘境。作为一个例子，一个15英寸的MacBook Pro有一个屏幕宽度为1440像素(忽略的那一刻Retina显示屏选项)。要确定适用于屏幕大小(大)的样式，我们可以写我们的样式表：

@media only screen and (min-width: 1440px){
     
/* styles for MacBook Pro-sized screens and larger */
}

该块中定义的样式将只适用于当用户访问的网页，使用的设备的屏幕大小为1440像素。有一个问题，虽然。媒体屏幕尺寸并不适用于设备的硬件，而是适用于Web浏览器的视口。视口是在浏览器窗口的大小减去任何浏览器中的铬，如工具栏。

除非用户在全屏模式下浏览，浏览器窗口会略小于1440像素宽。因此，对于这种更常见的情形，我们可能要重写样式表位。1200像素或许是比较现实的。

@media only screen and (min-width: 1200px){
     
/