前端——Vue响应式适配

说明

我们的项目是需要根据页面的大小改变或者屏幕分辨率的不同，做出响应式改变的，所以我们可以使用，第三方插件 flexible.js 帮助我们修改 html 根节点的 font-size 大小，从而控制当前页面的 rem(会根据页面的html根节点font-size大小改变而改变)样式改变。

flexible.js web自适应方案 阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

1.下载   

 npm i -S lib-flexible

2.在 main.js 中进行配置  

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引用
import 'lib-flexible/flexible.js'
// 使用
createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

3.修改 flexible 配置

因为默认情况下只会在540px分辨率一下生效，所以我们需要根据我们的项目分辨率进行调整，在node_module/lib-flexible/flexible.js中修改代码如下，这个时候重启项目，大家打开浏览器调试器，即可发现在浏览器大小改变的时候， 在html根节点上会自动设置一个font-size

// 修改原始的
// if (width / dpr > 540) {
//     width = 540 * dpr;
// }
// var rem = width / 10;
 
// 修改成为
  // 最小400px，最大适配2560px
if (width / dpr < 400) {
    width = 400 * dpr;
} else if (width / dpr > 2560) {
    width = 2560 * dpr;
}
// 设置成24等份，设计稿时1920px的，这样1rem就是80px （1920/24=80）方便使用
var rem = width / 24;

4.cssrem 插件

我们在写代码的时候发现如果我们都根据 80px 为 1rem 在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 这样一来开发过程中会更加的方便。

在vscode扩展中找到 cssrem插件 最新名字叫 px to rem & rpx 安装到vscode 中 点击右下角设置。修改Root Font Size（基准font-size） 配置项为 80 即可。