初探CSS4 -webkit-image-set

今天要讲述的是一个可以在webApp端适用的一个自适应图片大小的小技巧，来源于css4方案的 -webkit-image-set属性。

前言

这里是有关属性的基本语法:

image-set() = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ] <resolution>

image-set() 可以根据用户设备的分辨率匹配合适的图像。

示例:

div{
    background:url('../../assets/bg@2x.png') no-repeat;
    background:-webkit-image-set(
        url('../../assets/bg@2x.png') 2x,
        url('../../assets/bg@2x.png') 3x
    ) no-repeat;
    background-size:15px auto;
}

上述代码会根据设备的分辨率自动进行匹配，3x图片等一般适用于苹果的Retia屏幕。由于移动端浏览器的内核基本都是webkit所以此方法在webApp端使用效果较好。