【pc与移动端适配小tip】使用scss做vh，vw单位适配，scss的mixin与function方法

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;
  }
}

使用：

div{
	//pc端
	@include module-width(100, 'pc');
	//H5端
	@include module-width(100, 'H5');
}

高度适配

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

使用：

div{
	//pc端
	@include module-height(100, 'pc');
	//H5端
	@include module-height(100, 'H5');
}

字体大小适配

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

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

使用：

div{
	//pc端
	@include font-size(20, 'pc');
	//H5端
	@include font-size(20, 'H5');
}

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

横向参数适配

@function adaptation-width($argus, $mentods){
  @if($mentods == 'pc'){
    @return ($argus / 1920) * 100;
  } @else if($mentods == 'H5'){
    @return ($argus / 375) * 100;
  }
}

竖向参数适配

@function adaptation-height($argus, $mentods){
  @if($mentods == 'pc'){
    @return ($argus / 980) * 100;
  } @else if($mentods == 'H5'){
    @return ($argus / 767) * 100;
  }
}

使用：

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