依赖
项目基础配置使用 vue-cli 生成自适应方案核心: 阿里可伸缩布局方案 lib-flexiblepx转rem:px2rem,它有webpack的loader px2rem
开始
先使用vue脚手架初始化一个项目
vue create 项目名
项目初始化好了之后,进入项目目录中 (cd 项目名) 安装 lib-flexible 和 px2rem-loader
npm i lib-flexible -S
npm i px2rem-loader -D
安装好了之后还需要在项目的入口文件 main.js 里引入 lib-flexible
// main.jsimport 'lib-flexible'
接下来为了验证 lib-flexible 是否生效,可以将app.vue中的内容改成:
![8d657885ad40c011a22e9f73babd25d6.png](https://i-blog.csdnimg.cn/blog_migrate/6723a59827fefcb742e50655c69922cb.jpeg)
但是在实际开发中,我们通过设计稿得到的单位是px,所以要将px转换成rem再进行样式中。但如果都需要手动转的话,就很麻烦,所以需要一个工具替我们完成这项工作,这个时候就需要配置px2rem了,当然,编辑器可能也要对应的插件。
在 vue.config.js(没有的话就新建一个)中配置如下:
module.exports = { chainWebpack: config => { config.module .rule("css") .test(/.css$/) .oneOf("vue") .resourceQuery(/?vue/) .use("px2rem") .loader("px2rem-loader") .options({ remUnit: 75 }); }};
remUnit的值请自行修改。
修改配置以后 重启服务器,将原来app.vue文件中的样式改成:
但是有一个问题,我明明设置的宽度是按1920来的,为什么计算出来1rem=54px?
![70ec2bedc1c90a897279556cc861a4cc.png](https://i-blog.csdnimg.cn/blog_migrate/38f41b08239062ea292ffaf373e8e00d.jpeg)
是不是插件哪里出了问题,或者在哪里定义过跟54或者540相关的东西?
找到node_modules下的lib-flexible文件夹
![690f5c36aa096ae96bf3ec007a3f2a9a.png](https://i-blog.csdnimg.cn/blog_migrate/f3b6bdc308bebcd59d8fef3b054aeb31.jpeg)
![18b656df0b27ceeb4251704998541117.png](https://i-blog.csdnimg.cn/blog_migrate/d360a4bb51ccbe326d21cf204efe879c.jpeg)
找到问题了就解决问题,既然文件把屏幕宽度写死了,那就不写死:
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = width * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
现在再重启项目,看一下运行结果:
![91b9a3b8e762e7037df3793e1146d6f2.png](https://i-blog.csdnimg.cn/blog_migrate/890e963c960295a8fd1fcfef2642ea17.jpeg)
![52d152a4ab0dfde5ca48a1fc07df1727.png](https://i-blog.csdnimg.cn/blog_migrate/c2e25ab7c011d98405bb11dee29e94e2.jpeg)