Less 大屏自适应

由于 less 不能像 scss 一样自定义函数，只能被迫使用 minxin 混入封装大屏自适应相关样式代码

封装的代码

新建一个 less 文件，用来封装自适应代码

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// 默认设计稿的宽度
@designWidth: 1920px;
// 默认设计稿的高度
@designHeight: 1080px;
// 默认字体大小
@normalFontSize: 16px;

/*  宽度  */
.vw(@px) {
  width: @px / @designWidth * 100vw;
}

/* 高度 */
.vh(@px) {
  height: @px / @designHeight * 100vh;
}

/* 外边距 */
// 左右外边距
.marginVw(@left, @right) {
  margin-left: @left / @designWidth * 100vw;
  margin-right: @right / @designWidth * 100vw;
}

// 上下外边距
.marginVh(@top, @bottom) {
  margin-top: @top / @designHeight * 100vh;
  margin-bottom: @bottom / @designHeight * 100vh;
}

// 左右外边距同值
.marginVwAll(@value) {
  .marginVw(@value, @value);
}

// 上下外边距同值
.marginVhAll(@value) {
  .marginVh(@value, @value);
}

// 四边外边距同值
.marginAll(@value) {
  .marginVwAll(@value, @value);
  .marginVhAll(@value, @value);
}
/* 外边距end */

/* 内边距 */
// 左右内边距
.paddingVw(@left, @right) {
  padding-left: @left / @designWidth * 100vw;
  padding-right: @right / @designWidth * 100vw;
}

// 上下内边距
.paddingVh(@top, @bottom) {
  padding-top: @top / @designHeight * 100vh;
  padding-bottom: @bottom / @designHeight * 100vh;
}

// 左右内边距同值
.paddingVwAll(@value) {
  .paddingVw(@value, @value);
}

// 上下内边距同值
.paddingVhAll(@value) {
  .paddingVh(@value, @value);
}

// 四边内边距同值
.paddingAll(@value) {
  .paddingVwAll(@value);
  .paddingVhAll(@value);
}
/* 内边距end */

/* 定位 */
// 左
.left(@px) {
  left: @px / @designWidth * 100vw;
}

// 右
.right(@px) {
  right: @px / @designWidth * 100vw;
}

// 上
.top(@px) {
  top: @px / @designHeight * 100vh;
}

// 下
.bottom(@px) {
  bottom: @px / @designHeight * 100vh;
}
/* 定位end */

/*  字体大小  */
.rem(@px) {
  font-size: @px / @normalFontSize * 1rem;
}

/*  行高 vh  */
.lineHeightVh(@px) {
  line-height: @px / @designHeight * 100vh;
}

/*  行高 rem  */
.lineHeightRem(@px) {
  line-height: @px / @normalFontSize * 1rem;
}

使用方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 引入封装好的less文件
@import "adaptive.less";

.container {
  .vw(1920px);
  .vh(1080px);

  .content {
    .paddingVw(12px, 24px);
    .paddingVh(12px, 24px);
    .rem(18px)
    cursor: pointer;
  }
}