设置meate标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
自适应
-
1.px是相对单位固定的,无法自适应,不会随着屏幕尺寸的改变而改变.
-
rem根据html的font-size进行缩放,可以自适应,缺点就是需要计算每个屏幕的font-size
-
vw,vh是相对viewport视口单位,配合meate可以直接使用无需计算
计算规则
- 1vw=1/100 视口宽度
- 1vh=1/100 视口高度
- 当前屏幕视口是375像素,1vw就是3.75像素
postCss
- postCss 提供了 把Css 转换AST,把px转化为vm
下面使用vite构建一个vue项目
npm init vue
新建一个文件
pxto-viewport.js
const defaultOptions = {
viewPortWidth: 375,
mediaQuery: false,
unitToConvert: 'px'
}
export const pxToViewport = (options = defaultOptions) => {
const opt = Object.assign({}, defaultOptions, options)
return {
postcssPlugin: 'postcss-px-to-viewport',
//css节点都会经过这个钩子
Declaration(node) {
const value = node.value
//匹配到px 转换成vw
if (value.includes(opt.unitToConvert)) {
//正则匹配到带有px的数值,然后转化后替换
let regex = /\d+px/;
const num = parseFloat(value) //转化成数值
const transformValue = (num / opt.viewPortWidth) * 100 //转化
let newStr = value.replace(regex, `${transformValue.toFixed(2)}vw`); //替换
node.value = newStr //赋值
}
},
}
}
在vite.config中使用
import { fileURLToPath, URL } from 'node:url'
import { pxToViewport } from './src/plugins/pxto-viewport.js'
console.log("pxToViewport", pxToViewport)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
//这块是css的处理
css: {
postcss: {
plugins: [
pxToViewport()
]
},
},
})
这样就可以适配了··自己经过实验可是适配很多机型了,目前还没有发现bug。
原文出自:https://blog.csdn.net/qq1195566313/article/details/132526254。自己做了一个实现和调整,希望对大家有用。