¥Zµn®É¶¡¡G2019/5/16 13:54:55
ÂI¾\²v¡G90

µ§ªÌ©Ò¦bªº«eºÝ¹Î¶¤¥Dn±q¨Æ²¾°ÊºÝªºH5¶±¶}µo¡A¦Ó¹Î¶¤¨Ï¥Îªº¾A°t¤è®×¬O: viewport units + rem
¡C¨ãÅé¥i¥H°Ñ¨£¥W¥Y¹êÅç«Çªº¤å³¹– §Q¥Îµø¤f³æ¦ì¹ê²{¾A°t§G§½ ¡C
µ§ªÌ¥Ø«e¡]2017.08.12¡^±µÄ²¨ìªº²¾°ÊºÝ¾A°t¤è®×¤¤¡A¡u§Q¥Îµø¤f³æ¦ì¹ê²{¾A°t§G§½¡v¬O³Ì¦nªº¤è®×¡C¤£¹L¨Ï¥Î rem
§@¬°³æ¦ì·|¹J¨ì¥H¤U¨âÓÃøÂI¡G
- ·LÆ[¤Ø¤o¡]20px¥ª¥k¡^©w¦ì¤£ã
- ³v´V°Êµe®e©ö¦³§Ý°Ê
²Ä¤@ÓÃøÂIªº³q±`¥X²{¦b icon
ø»s¹Lµ{¡A¥i¥H¨Ï¥Î¹Ï¤ù©ÎªÌ svg-icon ¸Ñ¨M³oÓ°ÝÃD¡Aµ§ªÌ±j¯P«ØÄ³¨Ï¥Î svg-icon¡A¨ãÅé²z¥Ñ¥i¥H°Ñ¨£¡G¡u¾Ö©êWeb³]p·sÁͶաGSVG Sprites¹ê½îÀ³¥Î¡v¡C
²Ä¤GÓÃøÂIµ§ªÌÁ|Ó¨Ò¤l¨Ó¤ÀªR§Ý°Êªºì¦]©M´M§ä¸Ñ¨M¤è®×¡C
¤@ӧݰʪº¨Ò¤l
°µ¤@Ó8´Vªº³v´V°Êµe¡A¨C´Vªº¤Ø¤o¬°¡G360×540¡C
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.steps_anim {
position : absolute;
width : 9rem ;
height : 13.5rem ;
background : url (//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
background-size : 45rem 13.5rem ;
top : 50% ;
left : 50% ;
margin : – 5.625rem 0 0 – 5.625rem ;
animation : step 1.2s steps (5) infinite;
}
@ keyframes step {
100% {
background-position : – 45rem ;
}
}
|
Æ[¹î¦b¥D¬y¡]¤â¾÷¡^¤À¿ë²v¤Uªº¼½©ñ±¡ªp¡G
iPhone 6
(375×667) |
iPhone 6+
(414×736) |
iPhone 5
(320×568) |
Android
(360×640) |
 |
 |
 |
 |
¥|ºØ¤À¿ë²v¤U¡A¥i¥H¬Ý¨ì°£¤F ip6
¨ä¥¦ªº¤TºØ¤À¿ë²v³£µo¥Í¤F§Ý°Ê¡C¡]ip6
¤£§Ý°Êªºì¦]¬O¾A°t¤è®×¬O°ò¥»©ó ip6
ªº¤À¿ë²vq»sªº¡C¡^
¤ÀªR§Ý°Ê
¹Ï¹³¥Ñ²×ºÝ¡]«Ì¹õ¡^Åã¥Ü¡A¦Ó²×ºÝ«h¬O¤@ÓÓ¥úÂI¡]ª«²z¹³¯À¡^²Õ¦¨ªº¯x°}¡A´«¥y¸Ü»¡¹Ï¤ù¤]¤@²Õ¥úÂI¯x°}¡C¬°¤F¤è«K´yz¡Aµ§ªÌ°²³]²×ºÝ¤Wªº¤@Ó¥úÂI¥Nªícss¤¤ªº1px¡C
¥H¤U¬O¤@±i 9px * 3px
ªºsprite:

¨C´Vªº¤Ø¤o¬° 3px * 3px
¡A³v´Vªº¨ú¦ì¹Lµ{¦p¤U¡G

§âspriteªºbackground-sizeªº¼e«×¨ú¤@¥b¡A¨º»ò²×ºÝ·|«ç»ò³B²z¡H
9 / 2 = 4.5
²×ºÝªº¥úÂI³£¬O¥H¦ÛµM¼Æªº§Î¦¡¥X²{ªº¡A³o¸Ì»Ýn°µ¨ú¾ã³B²z¡C¨ú¾ã¤@¯ë¬O¤TºØ¤è¦¡¡Ground/ceil/floor
¡C°²³]¬Oround ¡A¨º»ò background-size: 5px
¡Asprite·|¬O¥H¤U¤TºØªº¤@Ó¡G
²z½×¤W¡A5 / 3 = 1.666...
¡C¦ý¹ê»Ú¤W¥úÂI¨ú¾ã«á¡A¤TÓ´Vªº¼e«×³£¤£¥i¯àµ¥©ó 1.666...
¡A¦Ó¬O¦³¤@Ó´Vªº¼e«×°¯Å¬° 1px
¡]Á«¡^¡A¥t¥~¨âÓ¼e«×¤É¯Å¬° 2px
¡]¬Õ¡^¡Aµ§ªÌ§â³oÓ²{¶HºÙ§@¡u¬ÕÁ«¤¬¸É¡v¡C
¦A¬Ý¤@¤U¬ÕÁ«¤¬¸É«á¡A³v´Vªº¨ú¦ì¹Lµ{¡G
¥i¥H¬Ý¨ì¥Ñ©ó¬ÕÁ«¤¬¸É¾ÉP¤F¤TÓ´Vªº¼e«×¤£¤@P¡AÁ«ªº¨º¤@´V¦b°Êµe¤¤ªºªí¥Ü´N¬O§Ý°Ê¡C
µ§ªÌÁ`µ²§Ý°Êªºì¦]¬O¡Gsprite¦b¤Ø¤oÁY©ñ«á¡A´V»P´V¤§¶¡ªº¬ÕÁ«¤¬¸É²{¶H¾ÉP°Êµe§Ý°Ê
ªþµù¡G1px ¥Ñ´XÓ¥úÂIªí¥Ü¬O¥Ñ¥H²×ºÝªºdpr ¨M©w
¸Ñ¨M¤è®×
¡u¬ÕÁ«¤¬¸É¡v¤]¥i¥H»¡¬O¡u¬ÕÁ«¤£¤@P¡v¡A¦pªG¤Ø¤o¦bÁY©ñ«á¡u¬ÕÁ«¤@P¡v¨º»ò§Ý°Ê²{¶H¥i¥H¸Ñ¨M¡C
¸Ñ¨Mºc·Q¤@
µ§ªÌ®Ú¾Ú¡u¬ÕÁ«¤@P¡v³]p¤F¡u¸Ñ¨Mºc·Q¤@¡v¡G

®Ú¾Ú¤W¹Ï¡A¨ä¹ê«Ü®e©ö´NÁp·Q¨ì¤@Ó²³æªº¤è®×¡G¤£¥Î³·ºÑ¹Ï¡]§Y¤@´V¹ïÀ³¤@±i¹Ï¤ù¡^¡C
³oÓ¤è®×½T¹ê¬O¥i¥H¸Ñ¨M§Ý°ÝÃD¡A¤£¹Lµ§ªÌ¨Ã¤£±ÀÂ˨ϥΥ¦¡A¦]¬°¥¦¦³¨âÓt±ªºªF¦è¡G
- KBÅܤj»P½Ð¨D¼Æ¼W¦h
- ¦h¾lªºanimation ¥N½X
³oÓ¤è®×«Ü²³æ¡A³o¸Ì´N¤£ÂØz¤F¡C
¸Ñ¨Mºc·Q¤G
§â³v´V¨ú¦ì»P¹Ï¹³ÁY©ñ©î¤À¦¨¨âÓ¿W¥ßªº¹Lµ{¡A´N¬Oµ§ªÌªº¡u¸Ñ¨Mºc·Q¤G¡v¡G

¹ê²{¡uºc·Q¤G¡v¡Aµ§ªÌº¥ý·Q¨ìªº¬O¨Ï¥Î transform: scale()
¡A©ó¬O¾ã²z¤F¤@Ó¹ê²{¤è®×A¡G
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.steps_anim {
position : absolute;
width : 360px ;
height : 540px ;
background : url (//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
background-size : 1800px 540px ;
top : 50% ;
left : 50% ;
transform-origin : left top;
margin : – 5.625rem 0 0 – 5.625rem ;
transform : scale (.5);
animation : step 1.2s steps (5) infinite;
}
@ keyframes step {
100% {
background-position : – 1800px ;
}
}
@ media screen and (width: 320px ) {
.steps_anim {
transform : scale (0.4266666667);
}
}
@ media screen and (width: 360px ) {
.steps_anim {
transform : scale (0.48);
}
}
@ media screen and (width: 414px ) {
.steps_anim {
transform : scale (0.552);
}
}
|
³oÓ¹ê²{¤è®×A¦s¦b©úÅ㪺¯Ê³´¡GscaleªºÈ»Ýn¼g«Ü¦hÂ_ÂI¥N½X¡C©ó¬Oµ§ªÌµ²¥þ¤@¬qjs¥N½X¨Ó§ïµ½³oÓ¹ê²{¤è®×B¡G
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.steps_anim {
position : absolute;
width : 360px ;
height : 540px ;
background : url ( “//misc.aotu.io/leeenx/sprite/m.png” ) 0 0 no-repeat;
background-size : 1800 540px ;
top : 50% ;
left : 50% ;
transform-origin : left top;
margin : – 5.625rem 0 0 – 5.625rem ;
animation : step 1.2s steps (5) infinite;
}
@ keyframes step {
100% {
background-position : – 1800px ;
}
}
|
javascript:
1
2
3
4
5
6
7
8
9
|
<script>
document .write( “<style id=¡¦scaleStyleSheet¡¦>.steps_anim {scale(.5); }</style>” );
function doResize () {
scaleStyleSheet.innerHTML = “.steps_anim {-webkit-transform: scale(“ + ( document.documentElement.clientWidth / 750 ) + “)}” ;
}
window .onresize = doResize;
doResize();
< /script>
|
³q¹L§ïµ½«áªº¤è®×CSS ªºÂ_ÂI¨S¤F¡A·Pı¬O¤£¿ù¤F¡A¤£¹Lµ§ªÌı±o³oÓ¤è®×¤£¬Oӯº骺ºc«Ø¤è®×¡C
§Ú̪¾¹D <img>
¬O¥i¥H®Ú¾Ú«ü©wªº¤Ø¤o¦Û¾AÀ³ÁY©ñ¤Ø¤oªº¡A¦pªG³v´V°Êµe¤]¯à»P <img>
¦Û¾AÀ³ÁY©ñ¡A¨º´N¥i¥H±q¯Âºc«Ø¨¤«×¹ê²{¡uºc·Q¤G¡v¡C
SVG
è¦n¥i¥H¸Ñ¨MÃøÃD¡I¡I¡ISVG
ªºªí²{»P <img>
Ãþ¦ü¦P®É¥i¥H°µ°Êµe¡C¥H¤U¬Oµ§ªÌªº¹ê²{¤è®×C¡C
html:
1
2
3
|
< svg viewBox = “0, 0, 360, 540” class = “steps_anim” >
< image xlink:href = “//misc.aotu.io/leeenx/sprite/m.png” width = “1800” height = “540” />
</ svg >
|
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.steps_anim {
position : absolute;
width : 9rem ;
height : 13.5rem ;
top : 50% ;
left : 50% ;
margin : – 5.625rem 0 0 – 5.625rem ;
image {
animation : step 1 .2s steps (5) infinite ;
}
}
@ keyframes step {
100% {
transform : translate3d (-1800px, 0, 0);
}
}
|
¤è®×Cªº§ï¨}
¹ê²{¤è®×C«Ü¦n¦a¸Ñ¨M¤F¤è®×A©M¤è®×Bªº¯Ê³´¡A¤£¹L¤è®×C¤]¦³¥¦ªº°ÝÃD¡G¤£§Q©ó¦Û°Ê¤Æ¤u¨ã¥h³B²z¹Ï¤ù¡C
¦Û°Ê¤Æ¤u¨ã¤@¯ë¬O«ç»ò³B²z¹Ï¤ùªº¡H
¦Û°Ê¤Æ¤u¨ã¤@¯ë¬O±½´yCSS¤å¥ó§ä¥X©Ò¦³ªº url(...)
»y¥y¡AµM«á¦A³B²z³o¨Ç»y¥y«ü¦Vªº¹Ï¤ù¤å¥ó¡C
¦pªG <image>
¥i¥H§ï¥ÎCSSªº background-image
´N¥i¥H¸Ñ¨M³oÓ°ÝÃD¡A¤£¹L SVG
¤£¤ä«ùCSSªº background-image
¡C¦ý¬O¡ASVG
¦³¤@ÓÂX®i¼ÐÅÒ¡GforeignObject
¡A¥¦¤¹³\¦V <svg></svg>
´¡¤J html
¥N½X¡C¦b¨Ï¥Î¥¦«e¡A¥ý¬Ý¤@¤U¥¦ªºÝ®e±¡ªp¡G

iOS»PAndroid 4.3¤@¤ù¯óºñÝ®e±¡ªpºâ¬O¨}¦n¡Aµ§ªÌ¹ê¾÷´ú¸ÕÄ˰T X5
¤º®ÖªºÂsÄý¾¹Ý®e¤´Â¨}¦n¡C¥H¤U¬O§ï¨}«áªº¤è®×¡C
html:
1
2
3
4
5
|
< svg viewBox = “0, 0, 360, 540” class = “steps_anim” >
< foreignObject class = “html” width = “360” height = “540” >
< div class = “img” > </ div >
</ foreignObject >
</ svg >
|
css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.steps_anim {
position : absolute;
width : 9rem ;
height : 13.5rem ;
top : 50% ;
left : 50% ;
margin : – 5.625rem 0 0 – 5.625rem ;
}
.html {
width : 360px ;
height : 540px ;
}
.img {
width : 1800px ;
height : 540px ;
background : url (//misc.aotu.io/leeenx/sprite/m.png) 0 0 no-repeat;
background-size : 1800px 540px ;
animation : step 1.2s steps (5) infinite;
}
@ keyframes step {
100% {
background-position : – 1800px 0 ;
}
}
|
§ï¨}«áªº¤è®×DEMO: http://jdc.jd.com/fd/promote/leeenx/201708/svg-sprite.html
µ²»y
·PÁ¾\Ū§¹¥»¤å³¹ªºÅªªÌ¡C¥»¤å¬Oµ§ªÌªºÓ¤HÆ[ÂI¡A§Æ±æ¯àÀ°§U¨ì¦³¬ÛÃö°ÝÃDªºªB¤Í¡A¦pªG¥»¤å¦³¤£§´¤§³B½Ð¤£§[½ç±Ð¡C
°Ñ¦Ò¸ê®Æ¡G
https://stackoverflow.com/questions/9946604/insert-html-code-inside-svg-text-element
https://www.w3.org/TR/SVG/extend.html
https://developer.mozilla. org/en-US/docs/Web/SVG/Element/foreignObject