通过scss或者less等CSS预处理器来设定一些特定函数，来达到适配兼容写法，下面列举一些例子：
base.scss
html {
font-size: 16px;
}
@media screen and (min-width: 320px) {
html {
/* iPhone5 每100像素宽字体增加1px(14px-16px) */
@include prefixer-value(font-size, calc(87.5% + 2 * (100vw - 320px) / 27.5), webkit moz o ms);
@include prefixer-value(font-size, calc(14px + 2 * (100vw - 320px) / 27.5), webkit moz o ms);
}
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
@include prefixer-value(font-size, calc(100% + 2 * (100vw - 375px) / 39), webkit moz o ms);
@include prefixer-value(font-size, calc(16px + 2 * (100vw - 375px) / 39), webkit moz o ms);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
@include prefixer-value(font-size, calc(112.5% + 4 * (100vw - 414px) / 586), webkit moz o ms);
@include prefixer-value(font-size, calc(18px + 4 * (100vw - 414px) / 586), webkit moz o ms);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
@include prefixer-value(font-size, calc(125% + 4 * (100vw - 600px) / 400), webkit moz o ms);
@include prefixer-value(font-size, calc(20px + 4 * (100vw - 600px) / 400), webkit moz o ms);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
@include prefixer-value(font-size, calc(137.5% + 6 * (100vw - 1000px) / 1000), webkit moz o ms);
@include prefixer-value(font-size, calc(22px + 6 * (100vw - 1000px) / 1000), webkit moz o ms);
}
}
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
42
43
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
42
43
compass.scss
$prefixForWebkit: true !default;
$prefixForMozilla: true !default;
$prefixForMicrosoft: true !default;
$prefixForOpera: true !default;
$prefixNo: true !default;
/* 给属性加浏览器前缀 */
@mixin prefixer($property, $value, $prefixes: o webkit) {
@each $prefix in $prefixes {
@if $prefix==webkit and $prefixForWebkit==true {
-webkit-#{$property}: $value;
}
@else if $prefix==moz and $prefixForMozilla==true {
-moz-#{$property}: $value;
}
@else if $prefix==ms and $prefixForMicrosoft==true {
-ms-#{$property}: $value;
}
@else if $prefix==o and $prefixForOpera==true {
-o-#{$property}: $value;
}
}
@if $prefixNo {
#{$property}: $value;
}
}
/* 给属性值加浏览器前缀 */
@mixin prefixer-value($property, $value, $prefixes: webkit moz) {
@each $prefix in $prefixes {
@if $prefix==webkit and $prefixForWebkit==true {
#{$property}: -webkit-#{$value};
}
@else if $prefix==moz and $prefixForMozilla==true {
#{$property}: -moz-#{$value};
}
@else if $prefix==o and $prefixForMozilla==true {
#{$property}: -o-#{$value};
}
@else if $prefix==ms and $prefixForMicrosoft==true {
#{$property}: -ms-#{$value};
}
}
@if $prefixNo {
#{$property}: $value;
}
}
/* 给keyframes动画加前缀 */
@mixin prefix-keyframes($animation-name) {
@keyframes #{$animation-name} {
@content;
}
@-webkit-keyframes #{$animation-name} {
@content;
}
@-moz-keyframes #{$animation-name} {
@content;
}
@-o-keyframes #{$animation-name} {
@content;
}
@-ms-keyframes #{$animation-name} {
@content;
}
}
/* px转rem */
@function px2rem($px) {
$baseFontSize: 16px;
@return ($px / $baseFontSize)+rem;
}
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
特别鸣谢：YIXIU;