开发自适应WordPress站点的时候,我们需要实现图片的自适应,最简单的方法就是给图片设置一个max-width:100%的属性,图片会在手机或平板等小屏幕上自动缩放为屏幕显示宽度的100%。
在web前段性能优化原则中,有一条是需要多大的图片,就提供多大的图片,以避免额外的带宽消耗。WordPress通过缩略图为我们提供了自动裁剪上传的图片的功能,很简单的支持了这个原则。然后却没有对自适应提供足够的支持,因为我们在移动设备上往往不需要像桌面设备那么大尺寸的图片,最理想的办法是,在移动设备上提供移动设备需要的较小尺寸的图片。
通过srcset属性实现不同宽度的设备加载不同尺寸的图片为了实现这个功能,现代浏览器为我们提供了srcset属性,用来