xiaoritai7803的博客

js设置响应式图片

响应式图片实现

SVG是可缩放矢量图形，矢量图形在拉伸和缩放的时候不会变形，但很难表示色彩层次丰富和逼真的图形。下面介绍几种画svg格式图片的方法。

上篇博客我们讲到，用srcset来实现响应式图片，但srcset方法有个坑(不管图片外边的容器宽度是多少都会以百分百视口宽度去显示)，需要配合size来跳过坑；size默认值为100vw–>viewport width意思是百分百视口宽度；size的值设置：xxvw;具体实现代码如下class="image" src="img/480.png"srcset="img/480.png 48

我们来分别介绍一下px,rem,empx 大家对px肯定都相对的比较熟悉了。px是固定的单位，是相对于屏幕分辨率而言的。1px=1像素。一般来说我们会把字体大小设为12px14px.使用px可以百分百还原设计稿，这样控制起来更加精确。但是在响应式布局中，更多的是使用相对距离，而且很多东西，会随着屏幕的大小改变而改变，设计稿存在伸缩性，在响应式布局中大多使用rem,em这种相对单位...