使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem

  有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在写rem数值的时候,都需要对设计图原始的px值进行一番换算。

  有没有工具可以辅助我们自动进行计算,我只要写px值就好了呢?当然是有的,编辑器其实就可以配置插件来对数值进行换算。但是有时候,我们在使用一些第三方ui库时,也想要对他们的px值进行转换,该怎么办呢?

  当当当当,来介绍一下两个好朋友,postcss-pxtorem 和 lib-flexible ,安装配置这两个依赖,我们就可以实现我们想要的功能啦。

  1. 首先,我们来安装一下这两个包

  npm安装方式:

npm install amfe-flexible --savenpm install postcss-pxtorem --save-dev

  yarn安装方式:

yarn add amfe-flexible
yarn add postcss-pxtorem --dev

  2. 在main.js中引入lib-flexible

import ‘amfe-flexible‘

  3. 配置postcss-pxtorem

  • vue-cli2配置方式:

    在.postcss.js文件中的plugins下新增postcss-pxtorem的配置

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
        rootValue: 192, // 根据设计图尺寸写,设计图是1920,就写192
        propList: [‘*‘], // 需要被转换的属性
        selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}
  • vue-cli3配置方式:

    在根路径下新增postcss.config.js文件(如果有,就不新增)

    配置的内容与上相同

  完成上述步骤后,就可以愉快得使用设计图里的px值进行代码编写了。如果设计图的宽度是1920,则给rootValue设置192就行,lib-flexible会帮助我们计算好根字体。

  postcss-pxtorem也可单独使用,但是相应的我们得自己写一个根字体的计算代码,以及视图窗口大小变化的监听事件,比较起来,还是配合lib-flexible比较省时省力。

  PS:如果部分设计样式不想转换为rem,可以将 px 改为 PX ,就不会对该数值进行转换了,但是这一点在 calc 计算属性中是不生效的,开发模式下没有问题,但是打包时会出现编译错误(截至postcss-pxtorem 4.0.1版本哈,后续也许作者会修复这个问题),这个时候需要配合 selectorBlackList 来设置一个class来取消px的转换。

原文地址:https://www.cnblogs.com/happymental/p/12397384.html

时间: 2024-11-09 06:13:49

使用postcss-pxtorem和lib-flexible来实现vue项目自动将px转成rem的相关文章

在vs2008中添加lib文件以及一些常用项目设置选项

下面以添加ws2_32.lib文件为例 方法一(直接添加代码): 直接在.cpp文件中,添加#pragma comment(lib, "ws2_32.lib");即可.(ws2_32.lib即为你要添加的lib文件) 方法二(在vs工具栏中添加): 1.项目(project) -> TcpSrv属性(TcpSrv properties) (其中TcpSrv为工程名) 2.打开TcpSrv属性页后,配置属性 -> 链接器(linker) -> 输入(Input) ,在附

@vue/cl构建得项目下,postcss.config.js配置,将px转化成rem

依赖包: postcss-pxtorem 配置: 在项目根目录下创建 postcss.config.js 配置如下: module.exports = () => ({ plugins: [ require('autoprefixer')(), // require('postcss-px2rem')({ remUnit: 75 }) require('postcss-pxtorem')({ rootValue: 37.5, propList: ['*'] }) ]}); rootValue (

在Myeclipse buildpath 加server lib (server runtime)/项目导入时报错:The import javax.servlet.http.HttpServletRequest cannot be resolved

来源于:http://blog.csdn.net/dingqinghu/article/details/8805922 http://yl-fighting.iteye.com/blog/1409468 使用Myeclipse,将eclipse下的工程复制过来后,发现提示Tomcat 7.0 unbound.缺少Server Runtime. 解决方法如下:1,File->New->Other->Server->Server(注意在new时,需要勾上Show All Wizards

[问答题] 用autoload($class) 实现Lib目录下的类的自动加载并可以兼容子目录

$request->action = lcfirst(implode(array_map( 'ucfirst', explode('-', strtolower($request->action)) ))); ------------------------------------------------------------ function __autoload($class) { $cls = strtolower(str_replace("_","/&q

移动vue项目,启动错误:Module build failed: Error: No PostCSS Config found in:

解决办法:在根目录新建postcss.config.js module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } } 然后再次启动项目即可解决 原文地址:https://www.cnblogs.com/johnjackson/p/10783075.html

Vue(项目踩坑)_These dependencies were not found: * !!vue-style-loader!css-loader?{"sourceMap":true}!../../../node_modules/vue-loader/lib/style-compiler/index?{"vue"

报错如下: 解决: 感谢 @ honey缘木鱼 大神的分享:https://blog.csdn.net/dt1991524/article/details/83413211 https://blog.csdn.net/qq_40930491/article/details/86547907 原文地址:https://www.cnblogs.com/xxm980617/p/11802603.html

使用Flexible实现手淘H5页面的终端适配

/*使用方式:在页面顶部引入flexible.js,将页面视觉设计稿切成10份,例如640px宽的视觉设计稿可切分成10个64px宽,以此为基准,手动计算页面中元素宽高和字体相对于64px比值,将这个比值作为元素宽高或字体大小的rem值即可*/ 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- 手淘的H5页面是如何实现多终端的适配 ? 那么趁此 

使用Flexible实现手淘H5页面的终端适配(转)

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目

移动端H5页面的最佳终端适配之Flexible

lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <script src="http://g.tbcdn.cn/mtb/lib-flexible/{{version}}/??flexible_css.js,flexible.js"></script> 将代码中的{{version}}换成对应的版本号0.3.4. flexib

展望未来:使用PostCss和cssnext书写css

作者:Mark Goodyear 原文链接:A look into writing future CSS with PostCSS and cssnext 像twitter,google,bbc使用的一样,我打算看一看使用PostCSS处理的css的世界. PostCSS是什么? PostCSS是使用javascript插件转换css的后处理器.PostCSS本身不会对你的css做任何事情,你需要安装一些plugins才能开始工作.这不仅使其模块化,同时功能也会更强. 它的工作原理就是解析css