关于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. 而后就能够应用了