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){
			const result = []
			for(let  i = 0; i <arr.length;i++){
				result.push(Number(arr[i].replace(new RegExp(' ', "gm"), '').replace(':','').replace(unit,'')))
			}
			return result
		}
		const rightData = getRightData(res)
		
		// 单位换算
		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 + updateUnit
		}
		
		for(let i=0;i < rightData.length;i++){
			let txt = unitConversion({
				num:rightData[i],
				unit,
				updateUnit,
				rule
			})
			if(res[i].indexOf(':') >= 0){
				txt = ': '+ txt
			}
			content = content.replace(res[i],txt)
		}
		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引入

效果如下：