响应式图片解决方案

响应式设计：是指在不同的屏幕分辨率，不同的像素密度比，不同宽度的终端设备中，网页布局可以自适应的调整。

响应式图片：是指根据不同尺寸的设备加载不同的图片。

一、常见结果方案

为适配不同终端机型的屏幕宽度和像素密度，我们一般会使用如下方法设置图片的CSS样式：

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

将图片的最大宽度设为100%，height：auto，以确保图片不会超出其父元素的宽度，如果父元素宽度发生变化，图片会根据自身的宽高比例进行缩放。

但是这样不同平台使用的是同一张大图片，不但浪费手机流量、影响网站载入速度并且在小屏幕下会很不清晰，严重影响用户的使用体验。

 

二、svg

svg是可缩放的矢量图形，基于可扩展标记语言生成，svg图像可以用任何的文本编辑器创建。

矢量图形在缩放时不会失真和变形，不基于像素，而是基于绘制规则（颜色，形状，位置等），和位图相比，最大的缺点是很难表现丰富的色彩层次和逼真的效果。常用于logo、图标的绘制。

在线制作svg格式的图片 ：