实现 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
注：@import 后面的 ';'不能省略，否则会报错