flexible可视化大屏适配方案
一、lib-flexible是什么?
lib-flexible会自动在html的head中添加一个 meta name="viewport"的标签,
同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。
假如设计稿的宽度是750px,此时1rem应该等于75px。
假如某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem。
但是当分辨率大于某个特定值时,它便不再生效。
dpr=物理像素 / 设备独立像素
1、移动端适配:
lib-flexible并不独立出现,而是搭配 px2rem-loader一起做适配方案,目的是自动将css中的px转换成rem。以下为它在vue中的使用。
01、安装 lib-flexible
npm install lib-flexible --save-dev
02、引入 lib-flexible
在 main.js
中引入lib-flexible
import 'lib-flexible'
03、安装 px2rem-loader
npm install px2rem-loader --save-dev
04配置 px2rem-loader
分两种情况:
- vue-cli 2.x
- vue-cli 3.x
0.1、vue-cli 2.x版中在build/utils.js
中,找到exports.cssLoaders
,作出如下修改:
const px2remLoader = { loader: 'px2rem-loader', options: { remUint: 75 // 以设计稿750为例, 750 / 10 = 75 } }
0.1.1、继续找到generateLoaders
中的loaders
配置,作出如下配置:
// 注释掉这一行 // const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] // 修改为 const loaders = [cssLoader, px2remLoader] if (options.usePostCSS) { loaders.push(postcssLoader) }
0.2、3.x版本。由于3.x版本需要自己配置,在项目根目录新建文件vue.config.js
,然后如下配置:
module.exports = { css: { loaderOptions: { css: {}, postcss: { plugins: [ require('postcss-px2rem')({ // 以设计稿750为例, 750 / 10 = 75 remUnit: 75 }), ] } } }, };
配置好,重新启动
npm/yarn run dev/serve
2、PC端/大屏适配:
按照移动端配置可能会有问题哟!!!
例如我们屏幕尺寸要做以3840 x 2160为设计稿的适配,那么我们的remUnit的值则改为384。然后呢?重启项目,发现……咦?布局全部乱掉!经过排查,自己的代码基本上不会导致该问题的出现,那么只能是源码在作怪了。重点来了。
找到源码打开./node_modules/lib-flexible/flexible.js
,找到如下片段源码:
在flexible.js文件下找到refreshRem()方法:
function refreshRem(){ let width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540* dpr; //width = width*dpr } let rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } 从此段源码中我们不难看出,当屏幕宽度除以dpr(dpr是一个倍数,此处一般为1)大于540这个特定值的时候,那么就不再进行适配了。那么我们如何解决这个问题呢?
修改源码:
在上述源码中,进行修改。例如我要适配的大屏幕尺寸是基于3840的设计稿,而要求最小范围是1980,最大为5760,那么我们要修改的则变为 function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr < 1980) { width = 1980 * dpr; } else if (width / dpr > 5760) { width = 5760 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
重启就好
切记在每次初始化 npm i 时,以上配置都要重新配置切记!切记!切记!
案例 http://8.135.114.187/sandaoh5/sandao/index.html#/
还需要将px自动转化为rem
npm i postcss-plugin-px2rem --save -dev
引入 postcss-plugin-px2rem
然后在vue-config.js中的loaderOptions配置如下
postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootValue: 192, //换算基数, 默认100 ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。 // unitPrecision: 5, //允许REM单位增长到的十进制数字。 //propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。 // propBlackList: [], //黑名单 exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值 // selectorBlackList: [], //要忽略并保留为px的选择器 // ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。 // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。 mediaQuery: false, //(布尔值)允许在媒体查询中转换px。 minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0 }), ] }