公司要做个16:9的自适应大屏展示页,使用lib-flexible + rem 的移动自适应方案
-
配置flexible
- 安装lib-flexible
npm i lib-flexible --save- 在main.js中引入
import 'lib-flexible'- 在index.html中添加
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
配置px2rem-loader
- 安装px2rem-loader
npm i px2rem-loader --save-dev- 因为初始化项目时是通过webpack打包的,在build文件夹下面的util.js中的cssLoaders中添加
var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 192 } }192是单位转化率,就是1rem = 192px
- 把px2remLoader放进generateLoader数组中
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader] -
找到node_modules文件夹下面的lib-flexible包中的flexible.js,修改 refreshRem()函数为
var width = docEl.getBoundingClientRect().width; var height = docEl.getBoundingClientRect().height; var n = width / height var e = 16 / 9 var rem = (n > e ? e / n : 1) * width / 10; // if (width / dpr > 540) { // width = 540 * dpr; // } // var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;这就是把手机自适应改为大屏自适应,为什么这么改,参照https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html
重启项目
