Vue项目中自动将px转换为rem
一、配置与安装步骤:
1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹:
2、在 config 文件夹中创建 rem.js:
3、将以下代码复制到 rem.js 中:
// 基准大小
const baseSize =
// 设置 rem 函数
function setRem () {
// 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
const scale = document.documentElement.clientWidth /
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, )) + '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": ,
"propList": ["*"]
}
}
}
至此,Vue 项目就能实现在页面中自动将 px 转换成 rem 了
二、实例演示:
假如给出设计图是 375*812,可以在代码中直接写入:
div{
width: 375px;
height: 812px;
}
此时在页面中显示:
如果要让部分属性不转换成 rem,可以将 px 写成 Px:
div{
width: 375Px;
height: 812px;
}
这时在页面中就会保留 375px 了:
Vue项目中自动将px转换为rem的更多相关文章
- vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
- Vue项目自动转换 px 为 rem,高保真还原设计图
技术栈 vue-cli:使用脚手架工具创建项目. postcss-pxtorem:转换px为rem的插件. 自动设置根节点html的font-size 因为rem单位是相对于根节点的字体大小的,所以通 ...
- 【转载】Vue项目自动转换 px 为 rem,高保真还原设计图
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- vue px转换为rem
前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- 转:如何在Vue项目中使用vw实现移动端适配
https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...
- vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
如何在vue-cli3.0中使用postcss-plugin-px2rem 插件 插件的作用是 自动将vue项目中的px转换为rem . 为什么这三个中要推荐 postcss-plugin-px2r ...
- 在Vue项目中使用vw实现移动端适配
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
随机推荐
- 【视频开发】非常优秀的CxImage各种格式图像开源工具
下面介绍应用它进行图像类型转换的方式: 1.从一种图像文件类型转换为另一种文件类型(convert from a format to another) CxImage image; // ...
- k8s 修改节点角色和删除节点
修改节点角色: kubectl label nodes cn-thin05 node-role.kubernetes.io/node= 卸载节点: kubectl drain jupiter --de ...
- win10 双网卡设置内网和外网同时访问
当前环境是内网使用固定ip 用有线连接 外网自动获取使用wifi模块连接wifi cmd窗口下运行route print -4 打印路由信息 首先删除 所有0.0.0.0的路由,也就是默认设置 rou ...
- QT QML 在qml中自定义信号
服从真理,就能征服一切事物. -- 塞涅卡 实例: 自定义文件 MoveYou.qml: import QtQuick 2.5 import QtQuick.Controls 1.4 import Q ...
- Java 8 集合之流式(Streams)操作, Streams API 详解
因为当时公司的业务需要对集合进行各种各样的业务逻辑操作,为了提高性能,就用到了这个东西,因为以往我们以前用集合都是需要去遍历(串行),所以效率和性能都不是特别的好,而Streams就可以使用并行的方式 ...
- 如何使用websocket实现前后端通信
websocket通信是很好玩的,也很有用的的通信方式,使用方式如下: 第一步由于springboot很好地集成了websocket,所以先在在pom.xml文件中引入依赖 <dependenc ...
- SQL学习-SQL Server
- DFS解决八皇后问题
2019-07-29 16:49:15 #include <bits/stdc++.h> using namespace std; ][]; int tot; int check(int ...
- gorm 批量插入数据
使用gorm 插入数据的时候,根据官方文档可以使用Create或者FirstOrCreate(). 但是官方没有提供批量插入数据的方法. 根据github的 issue得知,我们可以通过自己拼接sql ...
- UOJ269 清华集训2016 如何优雅地求和 下降幂多项式、NTT
代码 神仙题? 看到连续的点值,那么一定是要利用到连续点值的性质,可以考虑下降幂多项式,即考虑多项式\(F(x) = \sum\limits_{i=0}^m a_ix^{\underline i}\) ...