CSS自适应分辨率 postcss-pxtorem(适用于 Vite)

前言

此篇是基于 Vite + Vu3 项目的 CSS 自适应分辨率!
如果想知道基于 Webpack + Vue2 可移步 《CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem(适用于 Webpack)》
项目对应的主要插件版本如下:

"vite": "^4.4.5"
"vue": "^3.3.4"
"@vitejs/plugin-vue": "^4.2.3"

CSS 插件

postcss-pxtorem:使用 rem 代替 pxpostcss 插件,它可以自动将 px 转换成 rem,并且对一些特殊情况进行处理。

额外说明:插件 amfe-flexible 不再使用,最近更新是 6 年前…且在 Vite 中会报错,稍后会有替代方案!

安装

最新版 v6.1.0 报错,暂不细查原因… 使用固定版本 v6.0.0 ,此版本功能满足需求…
额外说明:最新版 v6.1.0 ,发布于 2024.01.20(写此篇文章的前5天左右)。而上个版本 v6.0.0 发布于 3 年前

npm i [email protected] -D

配置

  1. 文件 index.html配置
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  1. 根目录下配置文件 postcss.config.js。如下仅有部分配置,想了解更多配置可进入此处!

    module.exports = {
        "plugins": {
            "postcss-pxtorem": {
                rootValue: 16, // 16px = 1rem
                // unitPrecision: 5,
                propList: ['*'],
                // selectorBlackList: ['el-',], //
                // replace: true,
                // mediaQuery: false,
                // minPixelValue: 0
            }
        }
    }
    
  2. 根目录下新建 utils/rem.js 文件。其实是替代了插件 postcss-pxtorem 的功能。使用 window.onresize 监听窗口变化。

    // 设置 rem 函数
    function setRem() {
        // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
        const screenWidth = 1920
        const scale = screenWidth / 16
        const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
        // 得到html的Dom元素
        const htmlDom = document.getElementsByTagName('html')[0]
        // 设置根元素字体大小
        htmlDom.style.fontSize = htmlWidth / scale + 'px'
      }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function() {
        setRem()
    }
    

    或按高度来,适用于大屏。特别是页面左右两侧有大屏选项卡时。注意差异在第 2、4 行。按照高度

        // 按高度来
        const screenHeight = 1080
        const scale = screenHeight / 16
        const htmlHeight = document.documentElement.clientHeight || document.body.clientHeight
            // 得到html的Dom元素
        const htmlDom = document.getElementsByTagName('html')[0]
            // 设置根元素字体大小
        htmlDom.style.fontSize = htmlHeight / scale + 'px'
    

    4.main.js 引入

    import '@/utils/rem.js'
    

注意事项

  • 如果 CSS 代码在 css 文件或

你可能感兴趣的:(《Vite,基础知识》,css,postcss,前端)