在开发移动端项目，发现postcss-pxtorem无法将内联样式的px转成rem，这是一个非常致命的缺点。因为在开发项目时，经常会设置内联样式，那如何解决这个问题呢？

一、场景再现：

我以vue2项目举例，目前使用Vant UI的rem布局适配作为参考。（如下）

可见，需要下载两个插件，分别是 postcss-pxtorem 和 lib-flexible。怎么使用呢？

1、在你的vue项目的根目录下，新建一个postcss.config.js文件

2、在你的vue项目中找到src/main.js，添加：import "amfe-flexible"

3、此时此刻，rem 布局适配，已经配置完成。现在来实现一下样式：

效果如下，目前不是内联样式，单位被转成rem，毫无疑问，目前是自适应的状态。

二、发现问题

如果是设置内联样式，就出现问题了

单位没有被转成rem，目前文字大小不是自适应的状态

三、解决方案：

1、可以写一个px2rem方法

px2rem(px){if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%return px}else{return (parseFloat(px) / 37.5) + 'rem' // 这里的37.5，和rootValue值对应}
}

2、使用如下

可以发现，单位已经转成rem了，目前已经是自适应的状态

四、代码优化思想

建议将px2rem方法，放在全局，在src/main.js里写如下代码

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './routers'
import './permission.js'
import "amfe-flexible"function px2rem(px){if(/%/ig.test(px)){ // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%return px}else{return (parseFloat(px) / 37.5) + 'rem'}
}
Vue.prototype.$px2rem = px2rem // 放到全局Vue.config.productionTip = false
new Vue({router,store,render: h => h(App),
}).$mount('#app')

使用方式

希望本篇文章对你有帮助，如果您有更好的解决方案，欢迎留言评论！

postcss-pxtorem无法将内联样式的px转成rem相关推荐

React 项目----内联样式style的使用（12）
在此我们之前学习了react的基本的语法,对于页面我们还经常关注的是页面的样式,那么react 项目中,我们应该如何使用样式首先我们来做一个简单的页面一个评论的列表模拟数据: commentLis ...
在Vue中使用样式——使用内联样式
使用内联样式
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
DOM与元素节点内联样式
获取.设置及移除单个内联 CSS 属性每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...
微信小程序开发实战基础二、wxml模板，动态更新内联样式
1.模板使用 1.wxml中创建模板 <template name="msgItem"> <view> <text> {{index}}: {{ ...
element.style内联样式修改
最近在修改我个人博客的一个样式时发现,无论我如何修改style里面的值,页面上的样式都不会被修改,F12检查一下发现个element.style,但是却找不到这个值在哪里,查资料后才知道element ...
css内联样式_如何覆盖内联CSS样式
css内联样式本文写于2009年,至今仍是我们最受欢迎的帖子之一. 如果您想了解有关CSS的更多信息,您可能会发现这篇有关CSS技术的文章对视网膜显示非常感兴趣. CSS的最强大功能之一就是层叠. ...
css vue 内联_vue 内联样式style中的background
在我们使用vue开发的时候有很多时候我们需要用到背景图这个时候会直接使用内联样式直接把你拿到的数据拼接上去注意在vue中直接使用style时花括号一定别忘记还有就是你的url一定 ...
H5 css引入方式内联样式表
内联样式表通过style标签进行设置 <html> <head> <meta charset="utf-8"> <title>引入 ...

postcss-pxtorem无法将内联样式的px转成rem

一、场景再现：

二、发现问题

三、解决方案：

四、代码优化思想

postcss-pxtorem无法将内联样式的px转成rem相关推荐

最新文章

热门文章