如果是img标签引入的图片，可以使用延迟加载的方式来加载，在实际加载图片之前先用js检查窗口宽度，然后加载不同分辨率的图片，比如宽度<=480,就加载80px宽度的图片，480 <宽度 <= 768，加载120px的图片， 宽度>768则加载160px的图片，如果宽度是600px怎么办呢，通过百分比来缩放120px的图片达到合适的结果。
这样做的好处是对于移动设备来说，下载的图片会小一些，减少网页加载的时间。但是问题是竖屏向横屏切换或者扩大浏览器窗口宽度时图片会由于放大而产生一定的模糊感。
响应式设计中对于图片的考虑应该从布局设计就开始，尽量使图片在各个窗口宽度下的尺寸不要相差过大，通过排布更多的内容而不是扩大图片的尺寸来填充由于浏览器窗口扩大带来的空间。这样可以有效的减少图片放大模糊的问题。
直接float就可以了ul, ul li{
box-sizing:border-box
-moz-box-sizing:border-box
-webkit-box-sizing:border-box
}
ul li{display:inlinefloat:leftwidth:50%height:100pxpadding:0 10px}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
可以这么写试试看，图片直接设置为display:block如果宽度是根据窗口缩放的话，可以直接设置为100%；如果定宽就写margin:0 auto图片就是居中的。
网页设计标准尺寸：800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径"/rwd-router"。
当这些请求到达服务器端，htacces文件会决定这些请求所需要的是原始图片还是小尺寸的"响应式图片"，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
通过液态网格和液态图片技术，并且在正确的地方使用了正确的HTML标记。
响应式图片技术思想：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。这个技术的实现需要使用几个相关文件，我们可以在Github上获取。
包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率。
