转载

响应式Web之图片的缩放

其实对响应式网页有种片面的误解：页面元素不固定宽度，按百分比自动缩放，来实现不同尺寸视口的统一展示；响应式网页嘛，顾名思义，就是这种理解。其实响应式Web开发属于HTML5，并且是专门用来适配不同终端的，而且是根据终端类型来适配不同的功能模块和表现样式的，所以上面的理解是片面的；因为忽略了适配不同的功能模块，当然这样也就无形的增加了原本页面的复杂性，可能你为了适应3大终端，而必须得设计三套PSD，写三套样式表，还有额外的交互体验，但这是值得的，这样一来，你的应用在各种终端下都能完美展示，并且不失用户体验，在产品主线不变的情况下，能满足更多的用户需求，带来不一样的体验。

响应式Web初探——花满楼里有响应式开发的基本做法，这里谈下其中的一大重点，图片的缩放。我们要做的是：PC、iPad、mobile三大终端保质响应图片。

网页头部加入<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />后我们要适配的宽度就是手机的屏幕尺寸了。参照http://screensiz.es/phone可以看出，要想图片在手机上保质显示，图片宽度不应小于380到400，这时图片的样式width:100%、max-width:100%是很好的样子；但这个尺寸只是用于手机，其他终端下，图片必然会放大变形；

其实不就是响应缩放一个图片嘛，作为一个前端，这根本就不是啥难事，来个简单暴力的方式吧：统一图片尺寸以PC上为准，其他终端按max-width:100%来缩放，或者以手机上为准，去掉width:100%；但这两者都有一定弊端：前者在手机端的消耗将大大增加，后者很难满足复杂的场景。

下面来看media query的做法：

咱先把图片作为背景显示，分别适配三大终端；

@media only screen (max-device-width:350){background:url(mobile.png) no-repeat;background-size:100% 100%;}

@media only screen (min-device-width:500) and (max-device-width:1024){background:url(pad.png) no-repeat;background-size:100% 100%;}

@media only screen (min-device-width:1024) and (max-device-width:1024){background:url(pc.png) no-repeat;background-size:100% 100%;}

是的，这样你将会为一张图片的显示准备三个版本的图片和样式，然而这也并不是什么难事；在这里，不用担心你在一个终端会把3种图都加载，这3个media相当于3条if语句，只有符合条件才会去执行其中的样式。

HTML5很酷，前端很酷，作为一个小前端（花名：花满楼），道阻且长，只言片语，愚论拙见，在此分享，与君共勉！

正文到此结束