实现 1像素border
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
border
-1px
($color)
position
:
relative
&:after
display
:
block
position
:
absolute
left
:
0
bottom
:
0
width
:
100%
border-top
:
1px
solid
$color
content
:
' '
border-
none
()
&:after
display
:
none
|
使用时首先
|
1
|
@import
"../../common/stylus/mixin.styl"
;
|
为匹配不同设备，定义基本样式
|
1
2
3
4
5
6
7
8
9
10
11
|
@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
)
|
转自：http://www.cnblogs.com/jiangyangchang/p/6530385.html
注： 先定义一个 mixin (mixin 是 css 预处理器提供的一个方法，它可以通过定义一个函数，比如 border-1px($color),在其中定义的css代码，可以在其他css中直接通过调用函数来引用)
通过对伪类的缩放，来实现在不同屏幕下的1px 效果。
为了方便依赖所有的公共样式，创建一个 index.scss ，引入其他的公共scss,当应用到其他 css 时，直接引入index即可（@import "./index"）
mixin.scss
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/**
* 解决1px问题
*/
@mixin border
-1px
($color) {
position
:
relative
;
&:after {
display
:
block
;
position
:
absolute
;
left
:
0
;
bottom
:
0
;
width
:
100%
;
border-top
:
1px
solid
$color;
content
:
' '
;
}
}
|
base.scss
|
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
35
36
37
38
39
40
41
|
/**
* 判断在不同 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
);
}
}
}
/**
* 等同于
*/
[data-dpr=
'1.5'
] & {
.border
-1px
{
&::after {
-webkit-transform: scaleY(
0.7
);
transform: scaleY(
0.7
);
}
}
}
[data-dpr=
'2'
] & {
.border
-1px
{
&::after {
-webkit-transform: scaleY(
0.5
);
transform: scaleY(
0.5
);
}
}
}
|
index.scss
扫描二维码关注公众号，回复：
170569 查看本文章
注：@import 后面的 ';'不能省略，否则会报错