Vue项目中自动将px转换为rem

一、配置与安装步骤：

1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹：

2、在 config 文件夹中创建 rem.js：

3、将以下代码复制到 rem.js 中：

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

4、在 src 文件夹下的 main.js 中引入：

import './config/rem'

5、在 Vue 项目根目录终端引入：

npm install postcss-pxtorem -D

6、在 Vue 项目文件夹下的 postcss.config.js 中加入：

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

至此，Vue 项目就能实现在页面中自动将 px 转换成 rem 了

二、实例演示：

假如给出设计图是 375*812，可以在代码中直接写入：

div{width: 375px;height: 812px;
}

此时在页面中显示：

如果要让部分属性不转换成 rem，可以将 px 写成 Px：

div{width: 375Px;height: 812px;
}

这时在页面中就会保留 375px 了：

转载于:https://www.cnblogs.com/Leophen/p/11283677.html

Vue项目中自动将px转换为rem相关推荐

vue 项目中自动生成二维码
vue 项目中自动生成二维码最近在写一个vue项目,要求根据卡号可以自动生成一个二维码,并渲染在指定位置,因为第一次做类似业务,小编在网上找了找,发现了很多,具体起来主要用的就两种: QRc ...
vue项目中自动生成二维码
vue项目中自动生成二维码我们在做vue项目时,很多时候要用到生成二维码的功能,今天给大家介绍一个有前端生成二维码的小例子: 1.安装vue-qr: npm isntall vue-qr --sav ...
vue项目中自动拉取更新Iconfont（阿里巴巴图标库）
在vue项目中使用 iconfont图标库,网上的栗子很多,这边就随手给一个,点这里上面的解决了,那我就很苦恼,我每次添加或删除或更新图标库,需要重新下载?自己手动去覆盖吗?我是拒绝的.so,自 ...
vue项目中自动跳转到外部链接
今天在写一个web项目的时候,发现有一个功能需要点击导出,然后弹出框选择下载在本地,并且要求下的文件是xlsx类型的.首先我的思路是,点击导出,然后后端查询数据库的数据,把数据写入本地xlsx表中,然 ...
html页面如何按需导入vant,vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem...
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
Vue项目中750设计稿px自动转化成rem方法（小白一个，记录自己遇到的小白问题，大家勿怪）
一.首先下载 postcss-pxtorem 运行npm install postcss-pxtorem 完成下载之后,在package.json文件中添加这段代码 "postcss&quo ...
Vue项目自动转换 px 为 rem，高保真还原设计图
技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通 ...
基于vue-cli3的vue项目通过postcss-pxtorem 实现px自动转换成rem
使用postcss-pxtorem 项目中的px转换为rem,rem单位用于适配不同宽度的屏幕. 如何在vue-cli3.0中使用postcss-pxtorem 插件 1 安装依赖包 npm inst ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

Vue项目中自动将px转换为rem

一、配置与安装步骤：

1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹：

2、在 config 文件夹中创建 rem.js：

3、将以下代码复制到 rem.js 中：

4、在 src 文件夹下的 main.js 中引入：

5、在 Vue 项目根目录终端引入：

6、在 Vue 项目文件夹下的 postcss.config.js 中加入：

二、实例演示：

Vue项目中自动将px转换为rem相关推荐

最新文章

热门文章