CSS技巧(01)

从这周开始，我将会把每周看到有关于CSS有意思的技巧整合成一篇文章。将会在每周的星期天整理发布，每篇文章中将会以CSS的技巧为主线进行介绍，但每个技巧不会深入的阐述。主要目的给对CSS感兴趣的同学增强CSS的眼界，扩大知识面和使用场景。同时也希望能帮助大家将一些CSS技巧运用到实际项目中，另外提高自己在这方面的技术。如果感兴趣的话，可以持续关注，或者有你相关的技巧也可以和我们一起共享。

响应式图片

近来对于响应式设计的热度不怎么多，但事实上在Web的响应式设计中，响应式图片的处理一直都是一个难题，也是较为难处理。虽然有关于响应式图片的处理有难度，但社区一直就没有停过对其探讨。从最的简陋和最见效的方式：

这个方案虽然有效，也最为直接，但对于用户而言是最不佳的。特别是面对现在场景（终端设备众多），为了高清显示，不管三七二十一，都会加载最高清的图片。如此一来，对于高端设备而言没有太大问题，但对于低端设备而言就过于浪费了。除了加载慢还浪费

而对于Web而言，图片对用户又非常有吸引力，那么我们在使用图片的时候就必须考虑：

图片格式

图片大小（容器）

渲染尺寸（浏览器中布局的宽度和高度）

图片尺寸（图片原宽高）

纵横比（宽高比）

对于开发者而言，如何正确的选择这些或者更好的混合使用，为用户提供最佳的体验。要知道答案其实也并不难，可以尝试着下面这些问题的答案来进行选择：

图像是动态的（用户创建）还是静态的（设计团队创建）的？

图像的宽高比不成比例变化会影响图片质量吗？

是否所有图像都在相同的宽度和高度中渲染？渲染时，它们必须有一个特定的长宽比还是一个完全不同的长宽比？

在不同的视窗中显示图像时需要考虑什么？

具体操作时，把这些问题的答案记录下来，这样不仅可以助于你理解图像，还能有助于你做出正确的选择。

对于图像来源（动态还是静态）很好确定，而其中静态来源更好的处理，但如果图像资源是动态的，相对而言是较为复杂的。下面有一个例子值得我们研究分析，来确定最重要的设备和视窗大小。