移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:
1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。
|
1
2
3
4
5
6
|
@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 方法
|
1
2
3
4
5
6
7
|
div{
width
:
30px
;
height
:
20px
;
background-
size
:
30px
20px
;
background-repeat
:
no-repeat
;
@include bg-image(
'special_1'
);
}
|
移动端 border 的 1px 问题：
1.为了方便通用，使用 mixin 定义一个函数。
|
1
2
3
4
5
6
7
8
9
10
11
12
|
@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)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 判断在不同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:
|
1
2
3
4
5
6
7
8
9
10
11
|
<
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:
|
1
2
3
4
5
6
7
|
.tab{
display
: flex;
width
:
100%
;
height
:
40px
;
line-height
:
40px
;
@include border
-1px
(rgba(
7
,
17
,
27
,
0.1
));
}
|