px和rem单位互转(包含elementUI)

最新推荐文章于 2024-10-08 17:48:41 发布

zsd_666

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量20

点赞数

分类专栏： Web前端文章标签： elementui 前端 javascript

原文链接：www.baidu.com

版权

Web前端专栏收录该内容

113 篇文章 0 订阅

订阅专栏

px和rem单位互转(包含elementUI)

项目中样式替换

工具pxAndRemInterturn.js

/* 
    px和rem单位互转
    content: 样式表的内容
    unit: 需要替换的单位名称
    updateUnit: 替换后的单位名称
    rule: 
        单位换算规则，多少rem = px || px = rem
        例如：当rule为100时即表示 1rem = 100px
*/
export 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标签

element.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    @charset "UTF-8";@font-face{font-family:element-icons;src:url(fonts/element-icons.woff)format("woff"),url(fonts/element-icons.ttf) format("truetype");
        ... ...
  </style>
</head>
<body>
  
</body>
</html>

执行转换

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