vue-app项目,将px自动转化为rem
1. 安装lib-flexible:
npm i -S amfe-flexible(注意:lib-flexible尝试后,换算结果不正确,切记不要用)
2.安装px2rem:
npm install px2rem-loader
3.在项目入口文件main.js中引入lib-flexible import 'amfe-flexible'; 4. 在项目public目录的index.html头部加入手机端适配的meta的代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5.这里是重要的一步~~
在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:

const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
//注意: remUnit在这里要根据lib-flexible的规则来配制,如果您的设计稿是750px的,用75就刚刚好。
} }

同时,在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

6.重启,一切ok~
当配置完之后,只需要重启下服务,就自动转化为rem了
npm run dev
7.温馨提示
当你遇到1px的边框时,通常容易发现页面缺失部分边框,这时你可以使用/*no*/语法来屏蔽该属性转换,例如:
border: 1px solid red; /*no*/
由于字体的特殊性,我们在编译font-size属性时,通常不使用rem单位,这时候你可以这样使用: font-size: 24px; /*px*/ ---------------------
作者:娄笙悦
来源:CSDN
原文:https://blog.csdn.net/weixin_41424247/article/details/80867351
版权声明:本文为博主原创文章,转载请附上博文链接!
vue-app项目,将px自动转化为rem的更多相关文章
- vue适配移动端px自动转化为rem
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
- 使用vue脚手架搭建项目并将px自动转化为rem
一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...
- 移动端px自动转化为rem
注:不转换的px用大写PX代替 lib-flexible 作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装:cnpm ...
- vue项目中px自动转换为rem
.安装 postcss-pxtorem : npm install postcss-pxtorem -D .修改 /build/utils.js 文件 找到 postcssLoader const p ...
- vue app项目 第一天 基本架构和路由配置
一.前言 今天开始打算花6天时间 完成一个基于vue的买菜app 在这里记录一下项目的流程和第一次做这个项目遇到的坑 以及解决的办法 二.第一步 脚手架的安装 使用npm 安装好脚手架 安装脚手架教 ...
- vue App项目 首页
1. 下载 npm i mint-ui -S 2. 引入 import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' Vue.use(Min ...
- Vue将px转化为rem适配移动端
Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...
- Vue使用lib-flexible,将px转化为rem
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
- 60.Vue:将px转化为rem,适配移动端
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
随机推荐
- java解析文件
遇到两个小坑: 1.使用String.split,部分分隔符需要转义:https://www.cnblogs.com/mingforyou/archive/2013/09/03/3299569.htm ...
- Scrapy框架--代理和cookie
如何发起post请求? 代理和cookie: cookie:豆瓣网个人登录,获取该用户个人主页这个二级页面的页面数据. 如何发起post请求? 一定要对start_requests方法进行重写. 1. ...
- LeetCode 题解 Permutation Sequence 需要优化!
题目大意:给出n和k,找到1..n这些数组成的有序全排列中的第k个. 首先,n的全排列可以分成n组,每一组由n-1个数组成. 例如 3的全排列,分成三组: 1 2 3 和 1 3 2 2 1 3 ...
- Linux文件的时间
关于Linux文件的ctime.atime和mtime等几个时间的介绍,推荐<Linux的3个文件时间>比较不错,这篇文章已经介绍的比较全面了,但是本文对它做进一步的解释,并对一些情况进行 ...
- groovy语法
1.注释1.1. 单行注释1.2. 多行注释1.3. GroovyDoc注释1.4. Shebang线2.关键词3.标识符3.1. 普通标识符3.2. 带引号的标识符4.字符串4.1. 单引号字符串4 ...
- Linux ftp软件安装、配置和启动
ftp软件安装.配置和启动及相关问题的解决在测试环境使用过程中经常使用.本文以SuSE11sp1上vsftpd的安装过程进行介绍. 测试环境 SuSE11sp1 vsftp软件安装检查 1.rpm - ...
- httpClient服务端编写
以前用过HttpClient,给你说几个关键的地方吧: 1. 首先,发送的时候 HttpClient client = new HttpClient(); PostMethod method = ne ...
- shiro 密码的MD5盐值加密
- WinForm textbox 全选
原地址:忘了 textBox1.KeyPress += anyTextBox_KeyPress; private void anyTextBox_KeyPress(object sender, Sys ...
- 学JS的心路历程-函式(二)arguments
参数(argument)与函式参数(parameter) 在讨论函式时,很多人都会把这两个搞混,我自己也不例外. 虽然讲错别人也听得懂,但是我们还是要搞清楚这两个的定义到底是什么! 参数是当我们呼叫函 ...