1. transform: scale()
当自己没有好的方法时，我们参考下大厂的实现。找了下百度、网易等大数据适配的解决方案，发现采用了css3的缩放transform: scale(X)属性，不同页面大小采用不同的scale的值
1.1 封装一个全局组件
以vue 为例，命名为ScreenAdapter，
1. 封装一个全局组件 以vue 为例，命名为ScreenAdapter， <template> <div class="ScreenAdapter" :style="style" > <slot /> </div> </template> <script> export default { name: '', //参数注入 props: { width: { type: String, default: '1920' }, height: { type: String, default: '1080' } }, data() { return { style: { width: this.width + 'px', height: this.height + 'px', transform: 'scale(1) translate(-50%, -50%)' } } }, mounted() { this.setScale() window.onresize = this.Debounce(this.setScale, 1000) }, methods: { Debounce: (fn, t) => { const delay = t || 500 let timer return function() { const args = arguments if (timer) { clearTimeout(timer) } const context = this timer = setTimeout(() => { timer = null fn.apply(context, args) }, delay) } }, // 获取放大缩小比例 getScale() { const w = window.innerWidth / this.width const h = window.innerHeight / this.height return w < h ? w : h }, // 设置比例 setScale() { this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)' console.log('任你千变万化,我都不会影响性能') } } } </script> <style lang="scss" scoped> .ScreenAdapter { transform-origin: 0 0; position: absolute; left: 50%; top: 50%; transition: 0.3s; background: red; } </style>
1.2 将此组件包在我们搭建的页面上
1.3 根据UI绘制页面
根据给出的设计（主要获取给出的分辨率，如1920*1080）。
Div布局多采用flex+百分比布局（当然也可以根据给出的设计，默认写px。）。
各类空间设计，根据美工给出的px进行定义即可
2. flexiable px2rem-loader
2.1 、安装flexible和px2rem-loader
2.2、 在main.js 引入lib-flexible
import 'lib-flexible'
2.3、删除public/index.html 中的meta标记（非必要操作，如果不生效可以尝试下）
2.4、修改lib-flexible/flexible.js(node_modules) 将屏幕最大宽度改为设备宽度*dpr， 当然也可以在 main.js 中粘贴flexiable.js文件，然后进行修改如下
function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { // width = 540 * dpr; console.log('refreshRem') width = width * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; }
2.5、配置px2rem
配置px2rem 有两种方法
1、 放在css文件中的loader中，这里就不展示但是要注意放在postcss-loader之前
2、 放在vueconfig.js中，如下
chainWebpack: (config) => { ... config.module .rule('scss') .oneOf('vue') .use('px2rem-loader') .loader('px2rem-loader') .before('postcss-loader') // this makes it work. .options({ remUnit: 192, remPrecision: 5 }) .end() },
3. scss 或者 less的函数
可以在style中写一个函数文件这里我们以less为例，scss可以网上找下
取名为 adapter.less 文件内容
.vw(@name, @px) { @{name}: (@px / 1920) * 100vw } .vh(@name, @px) { @{name}: (@px / 1080) * 100vh }
// 然后将此文件引入到 每个页面文件中,可以直接按照px写,比如
font-size:24px, left: 24px, top: 24px, margin-top:24px height:24px width: 24px 可以写成如下
vw(font-size,24) .vw(left,24) .vh(top,24) .vh(margin-top,24) .vw(width,24) .vh(height,24)
// 4. vw vh
// 自己计算 vw和vh，但是比较麻烦
