UI给的设计图尺寸：
pc：1920980
H5：375*767
适配尺寸根据自己需求而定

mixin方法 (给具体的属性配置)

宽度适配

@mixin module-width($argus, $mentods){
  @if($mentods == 'pc'){
    width: ($argus / 1920) * 100vw;
  } @else if($mentods == 'H5'){
    width: ($argus / 375) * 100vw !important;
  }
}
1
2
3
4
5
6
7

使用：

div{
	//pc端
	@include module-width(100, 'pc');
	//H5端
	@include module-width(100, 'H5');
}
1
2
3
4
5
6

高度适配

@mixin module-height($argus, $mentods){
  @if($mentods == 'pc'){
    height: ($argus / 980) * 100vh;
  } @else if($mentods == 'H5'){
    height: ($argus / 767) * 100vh !important;
  }
}
1
2
3
4
5
6
7

使用：

div{
	//pc端
	@include module-height(100, 'pc');
	//H5端
	@include module-height(100, 'H5');
}
1
2
3
4
5
6

字体大小适配

（这里我的字体是用的vh做单位）

@mixin font-size($argus, $mentods){
  @if($mentods == 'pc'){
    font-size: ($argus / 980) * 100vh;
  } @else if($mentods == 'H5'){
    font-size: ($argus / 767) * 100vh !important;
  }
}
1
2
3
4
5
6
7

使用：

div{
	//pc端
	@include font-size(20, 'pc');
	//H5端
	@include font-size(20, 'H5');
}
1
2
3
4
5
6

function方法（仅配置属性参数）

横向参数适配

@function adaptation-width($argus, $mentods){
  @if($mentods == 'pc'){
    @return ($argus / 1920) * 100;
  } @else if($mentods == 'H5'){
    @return ($argus / 375) * 100;
  }
}
1
2
3
4
5
6
7

竖向参数适配

@function adaptation-height($argus, $mentods){
  @if($mentods == 'pc'){
    @return ($argus / 980) * 100;
  } @else if($mentods == 'H5'){
    @return ($argus / 767) * 100;
  }
}
1
2
3
4
5
6
7

使用：

div{
	width: adaptation-width(50vw, 'pc');
	height: adaptation-height(50vh, 'pc');
	padding: adaptation-height(5vh, 'pc') adaptation-width(5vw, 'pc');
}
1
2
3
4
5