项目将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像素即可。
更多推荐
vue项目将px转为rem实践
发布评论