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