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实践相关推荐

vue项目中px转rem方法（pc端）
首先安装这两个插件 npm install postcss-px2rem-excludenpm install postcss-px2remnpm install px2rem-loader 安装好了 ...
VUE项目中px转rem
借鉴了网上的方法,自己在这里整理下.借鉴链接→传送门一.安装 lib-flexible npm install lib-flexible --save 二.安装px2rem-loader npm i ...
Vue移动端项目中px转rem的两种方法
1)使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible// 或者npm i amfe-flexible 然后在main. ...
在vue项目中将px自动成rem
第一步: 在vue项目中的src文件夹下面创建一个config文件夹,在里面创建一个rem.js文件第二步:将下面代码复制到rem.js中 // 基准大小 const baseSize = 32 / ...
vue系列之----- px转rem配置
方法一一.配置与安装步骤: 1.在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2.在 config 文件夹中创建 rem.js: 3.将以下代码复制到 rem.js 中: / ...
vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）
1.使用vue-cli创建项目 vue create my-app 2.安装lib-flexible与postcss-pxtorem依赖 npm install lib-flexible -Snpm ...
vue使用postcss-pxtorem px转rem
装包 cnpm install postcss-pxtorem -D 修改根目录 .postcssrc.js 文件 // https://github.com/michael-ciniawsky/po ...
react项目中px转rem
第一步:安装 postcss-px2rem-exclude.lib-flexible.sass-loader.node-sass npm insatll lib-flexible sass-loade ...
Vue移动端项目——Vant 移动端 REM 适配
Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 ...

vue项目将px转为rem实践