移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:
1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}2.css样式中调用 bg-image 方法
div{
width:30px;
height:20px;
background-size:30px 20px;
background-repeat:no-repeat;
@include bg-image('special_1');
}移动端 border 的 1px 问题：
1.为了方便通用，使用 mixin 定义一个函数。
@mixin border-1px($color) {
position: relative;
&:after{
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid $color;
content: ' ';
}
}2.对 伪类 :after 进行缩放，以适应不同 dpr 的手机。通过 @media (媒体查询)，来确定 设备的 dpr。 为了方便调用，定义一个全局的 class (此处为 border-1px)
// 判断在不同dpr下的显示情况
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
3.html/css样式调用.
html:
<div class="tab border-1px">
<div class="tab-item">
<a v-link="{path:'/goods'}">商品</a>
</div>
<div class="tab-item">
<a v-link="{path:'/ratings'}">评价</a>
</div>
<div class="tab-item">
<a v-link="{path:'/seller'}">商家</a>
</div>
</div>
css:
.tab{
display: flex;
width: 100%;
height: 40px;
line-height: 40px;
@include border-1px(rgba(7,17,27,0.1));
}.