.mod-discovery__icon{
width: 25px;
height: 25px;
display: inline-block;
}
// 书写时调用 1x 图
.mod-discovery__icon_moment{
background-image: url(../slice/mod-discovery/icon-moment.png);
}
.mod-discovery__icon_qrcode{
background-image: url(../slice/mod-discovery/icon-qrcode.png);
}
.mod-discovery__icon_moment, .mod-discovery__icon_qrcode {
background-image: url(../sprite/style-index.b91f7ae0.png);
width: 25px;
height: 25px;
background-size: 25px
}
.mod-discovery__icon_qrcode {
background-position: -58px -4px
}
.mod-discovery__icon_shake {
background-position: -4px -58px
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 240dpi) {
.mod-discovery__icon_moment, .mod-discovery__icon_qrcode {
background-image: url(../sprite/style-index@2x.b983005a.png);
background-size: 87px
}
.mod-discovery__icon_moment {
background-position: -4px -4px
}
.mod-discovery__icon_qrcode {
background-position: -33px -4px
}
}
// 两种常见方法
.mod-sticker__icon {
width: 50px;
height: 50px;
display: inline-block;
background-size: 50px; // 注: 此处要额外设置背景图 size
}
.mod-sticker__icon_3{
background-image: url(../img/mod-sticker/3.gif);
}
.mod-sticker__icon_4{
background-image: url(../img/mod-sticker/4.gif);
}
<!-- IMG 标签 引入方式 -->
<img class="mod-sticker__icon" src="../img/mod-sticker/1.gif"></img>
<img class="mod-sticker__icon" src="../img/mod-sticker/2.gif"></img>
<!-- 背景图 引入方式 -->
<i class="mod-sticker__icon mod-sticker__icon_3"></i>
<i class="mod-sticker__icon mod-sticker__icon_4"></i>
.mod-sticker__icon {
width: 50px;
height: 50px;
display: inline-block;
background-size: 50px;
}
.mod-sticker__icon_3{
background-image: url(../img/mod-sticker/3.gif);
}
.mod-sticker__icon_4{
background-image: url(../img/mod-sticker/4.gif);
}
.bg-test {
background: url(../img/bg.png);
background-repeat: no-repeat;
}
.icon-test {
background-image: url(../slice/test.png);
}
.icon-test-retina {
background-image: url(../slice/test@2x.png);
}
.bg-test {
background: url(../img/bg.png);
background-repeat: no-repeat;
width: 1100px;
height: 300px;
}
.icon-test {
background-image: url(../slice/test.png); // test.png - 32x32
width: 32px;
height: 32px;
}
.icon-test-retina {
background-image: url(../slice/test@2x.png); // test@2x.png - 64x64
width: 32px;
height: 32px;
background-size: 32px;
}
.test {
display: flex;
}
:fullscreen {
}
.test {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
:-webkit-:full-screen {
}
:-moz-:full-screen {
}
:full-screen {
}
.mod-example{
text-align: center;
margin-bottom: 40px;
}
.mod-example__title{
display: inline-block;
font-size: 18px;
}
.mod-example{text-align: center;margin-bottom: 40px;}.mod-example__title{display: inline-block;font-size: 18px;
<!-- build:js ../js/build.js -->
<script src="../js/zepto.min.js"></script>
<script src="../js/all.js"></script>
<!-- endbuild -->
<script src="../js/build.js"></script>
<% for(var i = 0; i < 5; i++) {%>
<i class="emoji-<%-i %>">表情 <%-i %></i>
<% } %>
<i class="emoji-1">表情 1</i>
<i class="emoji-2">表情 2</i>
<i class="emoji-3">表情 3</i>
<i class="emoji-4">表情 4</i>
<i class="emoji-5">表情 5</i>
// 计算比例为 20:1
h1 {
margin: 0 0 20px;
padding: 0 0 20PX; // 单位使用大写 PX 可以避免进行 rem 处理 (hack 用法)
font-size: 32px;
line-height: 1.2;
letter-spacing: 2px;
border: 1px; // 为避免小数 Bug 问题 1px 不进行转换
}
<!-- HTML style 方式 -->
<style>
.test {
font-size: 10PX;
width: 20px;
margin: 30px 40px 50px 60px;
border: 1px solid #fff; // 为避免小数 Bug 问题 1px 不进行转换
}
</style>
<!-- HTML 内联方式 -->
<div style="font-size: 10PX; width: 20px; margin: 30px 40px 50px 60px; border: 1px solid #fff;">
text
</div>
// 1rem = 20px
h1 {
margin: 0 0 1rem;
padding: 0 0 20PX; // 无操作
font-size: 1.6rem;
line-height: 1.2;
letter-spacing: 0.1rem;
border: 1px; // 无操作
}
<!-- HTML style 方式 -->
<style>
.test {
font-size: 10PX; // 无操作
width: 1rem;
margin: 1.5rem 2rem 2.5rem 3rem;
border: 1px solid #fff; // 无操作
}
</style>
<!-- HTML 内联方式 -->
<div style="font-size: 10PX; width: 1rem; margin: 1.5rem 2rem 2.5rem 3rem; border: 1px solid #fff;">
text
</div>
.mod-text{
background-image: url(../img/1.png);
}
.mod-discovery__icon_moment {
background-image: url(../sprite/style-doc@2x.2185f236.png);
}
// 判断当前浏览器是否支持 WebP
<script>function webpsupport(a){var c=window.localStorage;if(typeof a!="function"){a=function(){}}if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==0){a();return false}else{if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==1){a(1);return true}else{var f=new Image();f.onload=f.onerror=function(){if(f.height!=2){if(c!=undefined){c._tmtwebp=0}a();return false}else{if(c!=undefined){c._tmtwebp=1}a(1);return true}};f.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}}};;(function(){function b(t){var f=document.getElementsByTagName("link");for(var e=0,d=f.length;e<d;e++){if(t){f[e].href=f[e].getAttribute("data-href").replace(".css",".webp.css");}else{f[e].href=f[e].getAttribute("data-href")}}}webpsupport(b);})();</script><script>window.imgMap = {"style-doc.c37f3134.png":1,"style-doc@2x.2185f236.png":1,"style-index.0d81f1de.png":1,"style-index@2x.ce40c0a0.png":1,"style-index@3x.11d4f2a0.png":1,"bg-body.48508064.png":1,"weflow-logo.c976aa23.png":1}</script>
// 自动替换 png -> webp
.mod-text{
background-image: url(../img/1.webp);
}
.mod-discovery__icon_moment {
background-image: url(../sprite/style-doc@2x.2185f236.webp);
}
<link rel="stylesheet" type="text/css" href="../css/style-index.css" />
<link rel="stylesheet" type="text/css" href="../css/style-index.css" />
<script>function webpsupport(a){var c=window.localStorage;if(typeof a!="function"){a=function(){}}if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==0){a();return false}else{if(c!=undefined&&c._tmtwebp!=undefined&&c._tmtwebp==1){a(1);return true}else{var f=new Image();f.onload=f.onerror=function(){if(f.height!=2){if(c!=undefined){c._tmtwebp=0}a();return false}else{if(c!=undefined){c._tmtwebp=1}a(1);return true}};f.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}}};;(function(){function b(t){var f=document.getElementsByTagName("link");for(var e=0,d=f.length;e<d;e++){if(t){f[e].href=f[e].getAttribute("data-href").replace(".css",".webp.css");}else{f[e].href=f[e].getAttribute("data-href")}}}webpsupport(b);})();</script>
<script>window.imgMap = {"style-doc.png":0,"style-doc@2x.png":0,"style-index.png":0,"style-index@2x.png":0,"style-index@3x.png":0,"bg-body.png":1,"weflow-logo.png":1}</script>