项目将px转为rem实践"/>

vue项目将px转为rem实践

px转rem好处

px转rem就是将你项目中的元素大小通过缩放的形式，适配于移动端/PC端的一种方式。该布局主要需要考虑到页面的布局方式，由于页面将被缩放，分辨率的问题就不存在了。将所有的可视区域都能被运用到开发视野，不用考虑入1200px所谓的安全区域。

文章目录

• px转rem好处
• 前言
• 一、创建rem.js
• 二、下载postcss-pxtorem插件
• • 1.下载插件
  • 2.使用插件
• 三、特别注意
• 总结

前言

提示：本文主要实践的是vue2项目下使用

一、创建rem.js

1.此处你需要添加一个名为rem.js的文件，将其引入到项目根目录main.js中
2.里面的内容大致如下：

// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {// 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920;// 设置页面根节点字体大小document.documentElement.style.fontSize =baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {setRem();
};

//main.js 中引入rem.js
import "./config/rem";

ps:小编将rem.js放在main.js同目录下的config目录下，可自行创建

二、下载postcss-pxtorem插件

1.下载插件

//小编下载的是5.1.1版本的，默认会是最新版本，但是会报错
//有大佬可以将报错原因打在评论区
npm install postcss-pxtorem@5.1.1 -D

2.使用插件

在项目更目录下创建postcss.config.js，其内容如下：

module.exports = {plugins: {autoprefixer: {},"postcss-pxtorem": {"rootValue": 16,"propList": ["*"]}}
}

三、特别注意

1.元素中使用style标签转rem失效
例如:

<div style="width:200px"></div> //无效

2.项目中如果不想转换可采用Px,将不会转换

.container-box{width:1200Px;  //不会转换height:800px;  //将会转换
}

总结

提示：这里对文章进行总结：
到这里重启项目，你就可以看到项目中的px已经转换为rem,使用时你仅需使用原始px像素即可。