注:不转换的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. 45.QT-连接外部dll,lib库导入问题

    dll库问题 查看MZ_Card.dll对应的文档手册,如下图所示: 所以代码写为: typedef BOOL (*Fun)(BOOL IsOpenComm,unsigned long Port, u ...

  2. Windows添加自定义开机用户登录启动程序

    默认的启动程序 Ctrl+shift -> Esc调用任务管理器-->启动项选项即可完成计算机开机自启动选项,不过这里只有系统默认添加的. 添加自定义开机启动程序 Windows+R调用运 ...

  3. Spring Boot Mybatis 最基本使用mysql存储过程

    首先声明:只是用最简单的方法大致了解如何用存储过程开发,如果需要查看存储过程创建语法的自行百度搜索 一.首先创建最基本的数据库 CREATE TABLE `t_user` ( `id` varchar ...

  4. PHP计算二维数组指定元素的和

    array_sum(array_column($arr, 'num')); //计算二维数组指定元素的和 $arr = [ [ 'id'=>1, 'num'=>3, ], [ 'id'=& ...

  5. python判断文件的访问权限

    os.access(file, mode)判断文件的访问权限file为文件mode为操作模式,有这么几种:os.F_OK: 检查文件是否存在;os.R_OK: 检查文件是否可读;os.W_OK: 检查 ...

  6. 无需重新安装软件,将软件从C盘移至其他盘(mklink)

    事先说明,这篇博文算是视频的文字转载版,来源为该视频的五分钟后内容→https://www.bilibili.com/video/av78397784/ 如何拯救标红的C盘[高玩] 有时候安装软件会手 ...

  7. Springcloud 微服务 高并发(实战1):第1版秒杀

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列之15 [博客园总入口 ] 前言 前言 疯狂创客圈(笔者尼恩创建的高并发研习社群)Springcloud 高并发系列文章,将为大家介绍三个版 ...

  8. 21-django-pure-pagination分页

    一.django-pure-pagination分页 github上的描述(django-pure-pagination provides advanced pagination features a ...

  9. strlen函数 (求字符串长度函数)

    strlen函数原型在<string.h>中 #include <stdio.h> #include <string.h> int main(){ char *p= ...

  10. go语言之map

    go语言的map就相当于python的dict 1.map的初始化 //创建map //k的类型是int,v的类型是string var test25_1 map[int]string fmt.Pri ...