注：不转换的px用大写PX代替

lib-flexible

  • 作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
  • 安装：cnpm i lib-flexible --save
  • 引入：入口文件main.js中：import 'lib-flexible/flexible'
  • 安装：cnpm install px2rem-loader
  • 配置px2rem-loader：在build文件中找到util.js，将px2rem-loader添加到cssLoaders

在generateLoaders方法中添加px2remLoader

参考：https://blog.csdn.net/yanzhi_2016/article/details/80461951

pxtorem:

  • 作用：将项目中的css的px转换成rem单位
  • 安装：cnpm add postcss-pxtorem
  • 配置：package.json内，在postcss内添加

参考：https://www.jianshu.com/p/8350b611e5bb

移动端px自动转化为rem的更多相关文章

  1. vue适配移动端px自动转化为rem

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  2. vue-app项目，将px自动转化为rem

    1. 安装lib-flexible: npm install --save lib-flexible 2.安装postcss-loader和postcss-px2rem: npm install -- ...

  3. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  4. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  5. 60.Vue:将px转化为rem，适配移动端

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  6. Vue:将px转化为rem，适配移动端vant-UI等框架（px2rem-loader）

    转载:https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm ...

  7. px2rem-loader（Vue:将px转化为rem，适配移动端）

    转载:https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm ...

  8. Vue使用lib-flexible，将px转化为rem

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  9. 了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

    本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. ...

随机推荐

  1. k8s的yaml说明

    理解k8s里的几个概念 Kubernetes 通过各种 Controller 来管理 Pod 的生命周期.为了满足不同业务场景,Kubernetes 开发了 Deployment.ReplicaSet ...

  2. document.write() 为什么会清空页面

    很久以前遇到的问题,放着放着就忘记去研究了最近看到一篇文章总结一下作者:abloumeurl:   http://blog.csdn.net/u013451157/article/details/78 ...

  3. .NET种Json时对单引号和特殊字符串的处理

    转自:https://www.cnblogs.com/ITniao/archive/2011/01/06/1929261.html .NET种Json时对单引号和特殊字符串的处理   在Asp.NET ...

  4. layui table 表格查询无效问题

    [热身话题] 在开发的过程中,大量数据的展示大多采用表格的方式,直观,清晰.在这里,我也使用过一些框架Bootstrap.table ,Dev table ,layui table.本次采用的layu ...

  5. 第03讲 fragment

    Fragment 官网文档:https://developer.android.google.cn/guide/components/fragments 什么是Fragment 在手机上,Activi ...

  6. 团队项目之Scrum4

    小组:BLACK PANDA 时间:2019.11.24 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 基本实现web富文本编辑功能 后台的编辑接口已经基本完成,还有一些b ...

  7. Harbor 清理镜像(此方法比较粗暴，但是有效)

    0x00 事件 Harbor 私有仓库中占有的存储慢慢越来越大,使用官方的清理工具以及 UI 上的垃圾清理,都似乎也不能清理掉-- 后来吾用了一种简单粗暴的方法清理镜像--删除 harbor regi ...

  8. Python里的*args and **kwargs

    http://book.pythontips.com/en/latest/args_and_kwargs.html https://stackoverflow.com/questions/339483 ...

  9. [Go] 轻量服务器框架基础TCP服务模块

    框架要先把整体的结构定义好,一般都是在$GOPATH目录的src下建立自己的目录 zinterface是一些接口的定义 znet就是接口的具体实现 IServer.go package zinterf ...

  10. 【模板】分治 FFT

    Link Solution 有两种解法. 法1: 直接上分治FFT,也就是CDQ分治+FFT. 具体做法是先递归左半边,算出左半边答案之后,将左半边贡献到右半边,然后递归右半边. 分治是一个log的, ...