js 批量修改CSS样式表(px，rem互转) elementUI适配rem - 戴向天

大家好！我叫戴向天

QQ群：602504799

QQ:809002582

我封装这个函数的初心的，公司的项目都是属于PC端，要求不管PC端的屏幕有多大都要完整的展示。在开发的时候一切都很好，但是在使用elementUI的时候，发现使用的组件不只如何进行相对应的调整，根据屏幕的大小而进行自适应。因为elemetUI使用的都是“px”单位所以我就自己做了一个方法将“px”和"rem"之间互转的方法。

如有不理解的请加群咨询或留言：602504799

代码如下

 /* 
		px和rem单位互转
		content: 样式表的内容
		unit: 需要替换的单位名称
		updateUnit: 替换后的单位名称
		rule: 
			单位换算规则，多少rem = px || px = rem
			例如：当rule为100时即表示 1rem = 100px
	*/
    function pxAndRemInterturn({
        content,
        unit,
        rule,
        updateUnit
    }) {
        rule = rule || 100
        if (!rule) return content;
        const reg = {
                px: /[\:]*[\s]*[-]*[\s]*[0-9]*[\.]*[0-9]*\p\x/g,
                rem: /[\:]*[\s]*[-]*[\s]*[0-9]*[\.]*[0-9]*rem/g,
                number: /[0-9]*[\.]*[0-9]*/g
            }
            // 获取到所有匹配的内容
        const res = content.match(reg[unit])
            // 传进来的是正则匹配的结构内容
        function getRightData(arr) {
            let result = []
            for (let i = 0; i < arr.length; i++) {
                result = result.concat(arr[i].match(/\d+/g))
            }
            return result
        }
        const rightData = getRightData(res)
        console.log(rightData)
            // 单位换算
        function unitConversion({
            num,
            unit,
            updateUnit,
            rule
        }) {
            let res = ''
            if (unit === 'px' && updateUnit === 'rem') {
                res = num / rule
            } else if (unit === 'rem' && updateUnit === 'px') {
                res = num * rule
            }
            return res
        }

        for (let i = 0; i < rightData.length; i++) {

            let txt = unitConversion({
                    num: rightData[i],
                    unit,
                    updateUnit,
                    rule
                })
            content = content.replace(res[i], res[i].replace(rightData[i], txt).replace(unit, updateUnit))
        }
        return content
    }

	
	const styleContent = document.querySelector('style').innerHTML

	const updateContent = pxAndRemInterturn({
		content:styleContent,
		unit:'px',
		updateUnit:'rem'
	})
	document.querySelector('body').innerHTML = updateContent

elementUI的样式表替换
第一步：找到/node_modules/element-ui/lib/theme-chalk/index.css这个文件
第二步：复制index.css里面的所有代码，然后创建一个新的html文件，并填充到给一个style标签

第三步：就是执行上面的代码

第四步：将得到的新CSS样式表替换/node_modules/element-ui/lib/theme-chalk/index.css的内容

我这个测试项目我做了一个适配的方法以及简单的初始化样式

适配文章详情=>https://blog.csdn.net/weixin_41088946/article/details/101107675

正常在main.js elementUI引入

效果如下：