Sass モバイルスプライトソリューション_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Sass モバイルスプライトソリューション_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:48:00

オリジナル

1359 人が閲覧しました

NetEase の同僚は、モバイル端末でスプライト画像を使用するためのほぼ完璧なソリューションをまとめました。これは、将来の使用のためにここにまとめられています。

導出プロセス

原理に注意を払う学生は、詳細な導出プロセスが記載されている Berlin Daniel の記事を読むことができます。もう二度と繰り返しません。

使用方法

まず、モバイルに適応したレムと一致させる必要があります:

/*移动端适配 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;    }}

ログイン後にコピー

次に追加しますcss スプライトミックスイン:

//$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);}

ログイン後にコピー

さらに、背景画像の background-size 属性の設定にも注意する必要があります。これも rem 単位です。

ユースケース

最後に栗を紹介します:

//同一张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);}

ログイン後にコピー

これで問題は完璧に解決されますね。刺激的ですか？