scss 官网自适应 px自动转rem

1、先定义common.scss全局引入文件

$vw_fontsize : 16;//默认初始值

$vw_design: 1920;//设计稿宽度

$min_width: 1200px;//最小宽度

@function rem($px) {
        
        
   @if $px==0 {
   
      @return 0;
      
   }
   @return calc($px / $vw_fontsize) * 1rem;
}

html {

   font-size: calc($vw_fontsize / $vw_design) * 100vw;
   
   @media screen and (max-width: 1200px) {// 最小宽度 最小值，不再变化
   
      font-size: 10px;
     
   }
}
body {
   min-width: $min_width;
}

2、使用

width:rem(12)//12为设计稿的宽度;

font-size:rem(12)//12为设计稿的大小;

以下自定义common.scss文件

$vw_fontsize : 16;
$vw_design: 1920;
$min_width: 1200px;

@function rem($px) {
   
   @if $px==0 {
      @return 0;
   }

   @return calc($px / $vw_fontsize) * 1rem;
}

html {
   font-size: calc($vw_fontsize / $vw_design) * 100vw;

   @media screen and (max-width: 1200px) {
      font-size: 10px;
   }
   -ms-overflow-style: none;
   /* IE 和 Edge */
   scrollbar-width: none;

   /* Firefox */
   ::-webkit-scrollbar {
      display: none;
      /* Chrome, Safari 和 Opera */
   }
}

body {
   min-width: $min_width;
}
:root {
   --m-theme-color: #083994;
}
.m-theme-color{
   color: var(--m-theme-color);

}
.m-white-color {
   color: #fff !important;
}

.m-black-color {
   color: #000 !important;
}

.m-grey-color {
   color: #cccccc !important;
}


.m-overflow-h {
   overflow: hidden;
}


.m-image{
   width: 100%;
   height: 100%;
}
.m-image-animation{
   width: 100%;
   height: 100%;
   transform: scale(1);
   transition: all 0.5s ease-in-out;
}
.m-image-animation:hover {
   transform: scale(1.2);
}
.m-card {
   box-sizing: border-box;
   height: 100%;
   padding: 10px;
   background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 2px 16px 2px rgba(20, 46, 110, 0.1);
}

.m-page-card {
   padding: 10px;
   box-sizing: border-box;
   background-color: #fff;
   border-radius: 5px;
}
.m-line {
   width: 100%;
   height: 1px;
   background-color: rgba(242, 241, 246, 1);
}
.m-box {
   box-sizing: border-box;
}
.m-border {
   border-top: 1px solid rgba(242, 241, 246, 1);
}
.m-elp-1 {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
.m-elp-2 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   /* 定义显示的行数 */
   overflow: hidden;
   text-overflow: ellipsis;
}
.m-elp-4 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
   /* 定义显示的行数 */
   overflow: hidden;
   text-overflow: ellipsis;
}
.m-text-nowrap {
   white-space: nowrap;
}
.m-text-wrap {
   word-break: break-all;
}
.m-text-center {
   text-align: center;
}
.m-text-left {
   text-align: left;
}
.m-text-right {
   text-align: right;
}
.m-pos {
   position: relative;
   &-tr {
      position: absolute;
      top: 0;
      right: 0;
   }
}
.m-pointer {
   cursor: pointer;
}

.m-loading {
   animation: loadingI 1.5s linear infinite;
}
@keyframes loadingI {
   0% {
      transform: rotateZ(0deg);
   }

   100% {

      transform: rotateZ(360deg);
   }
}

.m-flex{
   display: flex;
}
.m-flex-1 {
   flex: 1
}
.m-hidden {
   overflow: hidden
}
.m-font-weight-300 {
   font-weight: 300;
}
.m-font-weight-400 {
   font-weight: 400;
}
.m-font-weight-500 {
   font-weight: 500;
}
.m-font-weight-b{
   font-weight: bold;
}
@for $i from 10 through 40 {
   .m-line-height_#{$i} {
      line-height: #{rem($i)};
   }

   .height_#{$i} {
      height: #{rem($i)};
   }
}

@for $i from 10 through 80 {
   .font_#{$i} {
      font-size: #{rem($i)};
   }
}

@for $i from 1 through 500 {
   .m-br-#{$i} {
      border-radius: #{rem($i)} !important;
   }

   .m_#{$i} {
      margin: #{rem($i)};
   }

   .mt_#{$i} {
      margin-top: #{rem($i)};
   }

   .mr_#{$i} {
      margin-right: #{rem($i)};
   }

   .mb_#{$i} {
      margin-bottom: #{rem($i)};
   }

   .ml_#{$i} {
      margin-left: #{rem($i)};
   }

   .mlr_#{$i} {
      margin-left: #{rem($i)};
      margin-right: #{rem($i)};
   }

   .mtb_#{$i} {
      margin-top: #{rem($i)};
      margin-bottom: #{rem($i)};
   }

   .p_#{$i} {
      padding: #{rem($i)};
   }

   .pt_#{$i} {
      padding-top: #{rem($i)};
   }

   .pr_#{$i} {
      padding-right: #{rem($i)};
   }

   .pb_#{$i} {
      padding-bottom: #{rem($i)};
   }

   .pl_#{$i} {
      padding-left: #{rem($i)};
   }

   .plr_#{$i} {
      padding-left: #{rem($i)};
      padding-right: #{rem($i)};
   }

   .ptb_#{$i} {
      padding-top: #{rem($i)};
      padding-bottom: #{rem($i)};
   }
}