{{#each layouts}}
{{#each sprites}}
{{#if dpi}}
@media (-webkit-min-device-pixel-ratio: {{ratio}}), (min-resolution: {{dpi}}dpi) {
{{/if}}
.{{cssesc ../classname}} {
background-image: url('{{escimage url}}');
{{#if dpi}}
background-size: {{baseWidth}}px {{baseHeight}}px;
{{/if}}
}
{{#if dpi}}
}
{{/if}}
{{/each}}
{{#each layout.items}}
.{{../classname}}-{{meta.name}} {
background-position: -{{baseDim x}}px -{{baseDim y}}px;
width: {{baseDim width}}px;
height: {{baseDim height}}px;
}
{{/each}}
{{/each}}
需求:
页面是响应式的的
@media宽度大于1000px雪碧图正常显示
如
@media (min-width: 1000px) {
.icon-msg {
background-position: -0px -0px;
}
}
@media宽度小于1000px雪碧图缩放0.5倍
如
@media (max-width: 1000px) {
.icon-msg {
background-position: -0px -0px;
width: 11px;
height: 11px;
}
}
认证0级讲师