vue移动端布局单位适配（postcss）
2021-03-19 本文已影响0人
独自迈向前方
一、需要解决的问题
不同设备看到的视觉效果不同
适配修正后的
二、rem单位与适配原理
- px、em、rem区别介绍
- 即
rem单位不是固定大小的，会根据html标签的font-size大小决定实际大小。例：<html stytle="font-size:16px">时，1rem == 16px。 - 所以分两步解决：
- 1）、将所有
px单位转换为rem - 2）、根据不同设备的屏幕大小改变
html的字体大小
- 1）、将所有
三、适配代码
- 转换
px单位：
// 安装postcss-pxtorem转换库
// 如果是vue3.* 后续可能会报错，提示postcss使用^8.0版本，请使用postcss-plugin-px2rem库替换
npm install postcss-pxtorem --save-dev
-
postcss-pxtorem库的webpack使用配置
// ./vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// require('postcss-pxtorem')({
require('postcss-plugin-px2rem')({
rootValue: 16, // 这个值为16，因为浏览器的默认字体为大小为16。具体说明查看./src/utils/flexible.ts
selectorBlackList: ['#app', '.px-', 'html', 'body'], // 忽略的.px-前缀的类、#app、html和body标签
propBlackList: ['border'], // 忽略border前缀的属性(postcss-plugin-px2rem 存在该属性)
// propList: ['*', '!border'] // postcss-pxtorem请使用该属性（效果同上propBlackList）
}),
]
}
}
},
}
- 编写自动根据屏幕大小动态设置html的字体大小的js
- 下列代码主要是根据窗口大小变换，自动设置html的font-size，保证再任何大小，单位相对一致
// ./src/utils/flexible.ts
(function flexible(window: Window, document: Document) {
let docEl: HTMLElement = document.documentElement;
// let dpr: number = window.devicePixelRatio || 1;
// 设计稿宽度 / rootValue => 750 / 16 = 45 => 即可保证在所有视口下 1rem === 16px。bisection是与postcss-pxtorem中的rootValue 关联的
// 既：1rem === 设计稿宽度 / bisection === rootValue
const bisection: number = 45;
function setRemUnit() {
const viewWidth = docEl.clientWidth || document.body.clientWidth;
const rem = viewWidth / bisection;
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
}(window, document))
- 在入口文件
main.ts中引入flexible.ts
import "./utils/flexible"
四、具体转换参考实例
实例
五、移动端整体最大宽度限定（进阶）
- 待定
