注:不转换的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. CSS入门(定位的简单总结)

    一.定位 普通流定位 浮动定位 相对定位 绝对定位 固定定位 二.position定位 1.static(默认值) 2.relative 相对定位 3.absolute 绝对定位 4.fixed 固定 ...

  2. Angular + Leaflet 实现房源数据可视化(附github源码)

    这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房​ 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的 ...

  3. 复杂的POI导出Excel表格(多行表头、合并单元格)

    poi导出excel有两种方式: 第一种:从无到有的创建整个excel,通过HSSFWorkbook,HSSFSheet HSSFCell, 等对象一步一步的创建出工作簿,sheet,和单元格,并添加 ...

  4. 学习之Redis(二)

    Redis的对象和数据结构 一.字符串对象(请参考学习之Redis(一):https://www.cnblogs.com/wbq1994/p/12029516.html) 二.列表对象 列表对象的编码 ...

  5. 自生成图片验证码Servlet

    package com.woniuxy.busniess.servlet; import java.awt.*; import java.awt.geom.*; import java.awt.ima ...

  6. 附002.Minikube介绍及使用

    一 Minikube介绍 1.1 概述 Minikube是一种可以在本地轻松运行Kubernetes的工具.Minikube在笔记本电脑的VM中运行单节点Kubernetes集群,供希望尝试Kuber ...

  7. 《Web Development with Go》JWT认证

    时间晚了,先来一版调通的JWT普通认证, 明天再弄一个通过中间件,及gorilla,negroni库的认证, 这样正规些, 但认证通过之后,如何对应权限? 由于jwt-go从2升到3,还有rsa 10 ...

  8. Java之Map接口(双列集合)

    Map集合概述 现实生活中,我们常会看到这样的一种集合:IP地址与主机名,身份证号与个人,系统用户名与系统用户对象等,这种一一对应的关系,就叫做映射.Java提供了专门的集合类用来存放这种对象关系的对 ...

  9. HTML连载54-网易注册界面实战之信息填写

    一.完成了内容中的右边的一部分.练习了三点:小盒子在大盒子中的位置,最好用大盒子的内边距完成布局,而不是用小盒子的外边距来进行布局:复习了ul,li的用法. <!DOCTYPE html> ...

  10. E-factory

    E-factory为生成XML和HTML提供了一种简单而紧凑的语法 # coding:utf-8 from lxml.builder import E def CLASS(*args): # clas ...