今天要讲述的是一个可以在webApp端适用的一个自适应图片大小的小技巧,来源于css4方案的 -webkit-image-set属性。
前言
这里是有关属性的基本语法:
image-set() = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ] <resolution>
image-set() 可以根据用户设备的分辨率匹配合适的图像。
示例:
div{
background:url('../../assets/[email protected]') no-repeat;
background:-webkit-image-set(
url('../../assets/[email protected]') 2x,
url('../../assets/[email protected]') 3x
) no-repeat;
background-size:15px auto;
}
上述代码会根据设备的分辨率自动进行匹配,3x图片等一般适用于苹果的Retia屏幕。由于移动端浏览器的内核基本都是webkit所以此方法在webApp端使用效果较好。