关于rem:响应式rem适配方案

说起挪动端适配，经常会想到rem,在这里写两种rem适配计划：

一、自定义配置

在rem.scss文件中定义：

/**
设计稿的宽：$design_width
设计稿的高：$design_height
需本人定义
**/
@function px2rem($px) {
  @return $px / ($design_width / 10) * 1rem;
}

@function rem2px($rem) {
  @return $rem * ($design_width / 10) * 1px;
}

@function px2vh($px) {
  @return $px / $design_height * 100vh;
}

@function px2vw($px) {
  @return $px / $design_width * 100vw;
}

应用：引入rem.scss

@import "./rem.scss";
.table {
    width:px2rem(300);
    height: px2rem(180);
    margin: 0 px2rem(16);
}

二、flexible.js

操作步骤：

1.装置lib-flexible.js

npm install lib-flexible --save

2.在我的项目入口文件main.js 中引入lib-flexible

import 'lib-flexible/flexible'

3.在VScode中装置cssrem插件

4.批改默认字体的大小
在设置中，搜寻框外面输出 cssroot 会显示用户和工作区，如果效果图是750，那这里就改成75，如果是375这里就改成37.5，要让rem单位换算正确；

5.而后就能够应用了