Sass之移动端雪碧图解决方案_html/css_WEB-ITnose

/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/@media screen and (max-width:359px) and (min-width:320px) {    html,body{        font-size: 50px !important;    }}@media screen and (max-width:374px) and (min-width:360px) {    html,body{        font-size: 56.25px !important;    }}@media screen and (max-width:413px) and (min-width:375px) {   html,body{        font-size: 58.594px !important;    }}@media screen and (max-width:639px)  and (min-width:414px){   html,body{        font-size: 64.687px !important;    }}@media screen and (min-width:640px) {   html,body{        font-size: 100px !important;    }}

//$spriteWidth 雪碧图的宽度px//$spriteHeight 雪碧图的高度px//$iconWidth 需要显示icon的宽度px//$iconHeight 需要显示icon的高度px//$iconX icon的原始x坐标,也就是background-posotion中的负值//$iconY icon的原始y坐标//使用@include bgPositionSameSpriteAndWidth(80, 10);@mixin bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY){    background-position: (($iconX / ($spriteWidth - $iconWidth)) * 100% ($iconY / ($spriteHeight - $iconHeight)) * 100%); }

//同一张sprite图并且每个icon的大小相同@mixin bgPositionSameSpriteAndWidth($iconX, $iconY){    $spriteWidth : 220;    $spriteHeight : 220;    $iconWidth : 61;    $iconHeight : 61;    @include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY);}

//同一张sprite图并且每个icon的大小相同@mixin bgPositionSameSpriteAndWidth($iconX, $iconY){    $spriteWidth : 220;    $spriteHeight : 220;    $iconWidth : 61;    $iconHeight : 61;    @include bgPosition($spriteWidth, $spriteHeight, $iconWidth, $iconHeight, $iconX, $iconY);}//使用i{    padding-top: 100%;    width: 100%;    display: block;    background: url(http://nos.netease.com/edu-image/3A65D313376F13CE75CE01C2593BD1CE.png) 0 0 no-repeat;    background-size: 2.2rem 2.2rem;}.i-sina{    @include bgPositionSameSpriteAndWidth(10, 10);}.i-qzone{    @include bgPositionSameSpriteAndWidth(80, 10);}.i-qq{    @include bgPositionSameSpriteAndWidth(150, 10);}.i-douban{    @include bgPositionSameSpriteAndWidth(10, 80);}.i-yixin{    @include bgPositionSameSpriteAndWidth(80, 80);}.i-renren{    @include bgPositionSameSpriteAndWidth(150, 80);}