vue中将px单位转成rem

方法一： px2rem-loader + lbi-felix（这种方法可能会导致第三方UI库样式缩小）：

1.首先安装需要用到的包

npm install px2rem px2rem-loader lib-flexible -S

2.编辑build/utils.js 如图位置增加代码

如果将remUnit设置为100，相对于750的设计稿那么总宽度就是( 750 / 100 ) = 7.5rem这里根据实际设计稿宽度定

3.在main.js中引入包

import 'lib-flexible/flexible'

4.重启项目，此时可以看到px转化后的rem

方法二：postcss-px2rem-exclude

1.安装

npm install postcss-px2rem-exclude -S

2.修改postcssrc.hs文件

module.exports = {"plugins": {"postcss-px2rem-exclude": {remUnit: 100, exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件}}
}

vue中将px单位转成rem相关推荐

vue 自动px单位自动转换rem
vue 自动px单位自动转换rem vue 适配移动端假设设计图是750 第一步安装 lib-flexible npm i lib-flexible --save 第二步 px2rem-loade ...
Vue自动px单位自动转换rem
上期说到使用 lib-flexible + postcss-px2rem-exclude 实现px 转 rem,但是发现实现的结果是错误的,宽度根本不够,查看各种资料了解到,现在已经不使用了,现在使用 ...
前端怎么把px单位换成rem单位解决项目页面适配问题
先看没有适配前的效果,下面是没有适配前,使用的是px单位,代码和效果如下: <!DOCTYPE html> <html><head><meta charset ...
基于vue-cli3的vue项目通过postcss-pxtorem 实现px自动转换成rem
使用postcss-pxtorem 项目中的px转换为rem,rem单位用于适配不同宽度的屏幕. 如何在vue-cli3.0中使用postcss-pxtorem 插件 1 安装依赖包 npm inst ...
在vue项目中将px自动成rem
第一步: 在vue项目中的src文件夹下面创建一个config文件夹,在里面创建一个rem.js文件第二步:将下面代码复制到rem.js中 // 基准大小 const baseSize = 32 / ...
vue中px转rem教程
1:下载插件安装px2rem-loader(devDependencies) npm install px2rem-loader -D 移动端适配解决npm包 "lib-flexible& ...
vue项目全局把px转换成rem
vue项目全局把px转换成rem 首先vscode要有px to rem插件 1.vue.config.js 在vue.config.js中配置 css: {...// css预设器配置loaderO ...
postcss-pxtorem无法将内联样式的px转成rem
在开发移动端项目,发现postcss-pxtorem无法将内联样式的px转成rem,这是一个非常致命的缺点.因为在开发项目时,经常会设置内联样式,那如何解决这个问题呢? 一.场景再现: 我以vue2项 ...
vue工程px转rem，postcss-px2rem插件的使用，移动端适配方案
vue工程实现px转rem 使用px单位在不同宽高比设备上显示样式比例有差异,rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.可以使用rem实现自适应. ...

vue中将px单位转成rem

方法一： px2rem-loader + lbi-felix（这种方法可能会导致第三方UI库样式缩小）：

2.编辑build/utils.js 如图位置增加代码

如果将remUnit设置为100，相对于750的设计稿那么总宽度就是( 750 / 100 ) = 7.5rem这里根据实际设计稿宽度定

3.在main.js中引入包

4.重启项目，此时可以看到px转化后的rem

方法二：postcss-px2rem-exclude

1.安装

2.修改postcssrc.hs文件

vue中将px单位转成rem相关推荐

最新文章

热门文章