vue移动端自动将px转换成rem

Myth丶恋晨 2024-04-17 22:24 95阅读 0赞

在开发移动端的过程中，如何频繁的去计算rem和px之间的转换时一件非常麻烦的过程，接下来提供一个vue框架可以自动转换

## 一、安装lib-flexible依赖 ##

npm install lib-flexible --save

## 二、引入lib-flexible依赖 ##

main.js中添加以下代码

import 'lib-flexible/flexible'

## 三、配置meta 标签内容 ##

## 四、安装px2rem-loader依赖 ##

npm install px2rem-loader --save-dev

## 五、配置相关px2rem-loader ##

在build下的 utils.js文件下，添加以下代码

const px2remLoader = { 
        loader: 'px2rem-loader',
        options: { 
          remUnit: 75
        }
      }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 1]

## 六、重启项目看效果 ##

可以看到在网页中html的font-size已根据当前手机自动调整了font-size属性的大小![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 2]  
可以在项目中添加测试代码进行测试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 3]  
可以看到最终该div的大小为10rem，实现了自动将px转换陈成rem![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 4]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/64140341aa39476baec731d3a7eb4a72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/2f79a208242b497581aa143c62c6d5c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/159e907deef04da1a3ad9e2dae49b2c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4ae2e73b713b4380868d1eece6e81e1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyMjEyMA_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/9dc2bc10ed7a4e5687cf96ae6e8fdea9.png