注：不转换的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. 案例——UDP聊天

    UDP聊天案例   做一个网络编程相关的案例,想着用利用UDP的快速且不用连接的优点做一个聊天室,我们一个聊天程序需要可以接收消息,也要可以发送消息,所以我们的DatagramSocket对象不但需要 ...

  2. 版本控制工具——Git常用操作

    本文引自:https://juejin.im/post/5c206f1bf265da615114c15a

  3. 一文解读JSON (转)

    JSON作为目前Web主流的数据交换格式,是每个IT技术人员都必须要了解的一种数据交换格式.尤其是在Ajax和REST技术的大行其道的当今,JSON无疑成为了数据交换格式的首选! 今天我们一起来学习一 ...

  4. Linux系统学习 十九、VSFTP服务—虚拟用户访问—为每个虚拟用户建立自己的配置文件，单独定义权限

    为每个虚拟用户建立自己的配置文件,单独定义权限 可以给每个虚拟用户单独建立目录,并建立自己的配置文件.这样方便单独配置权限,并可以单独指定上传目录 1.修改配置文件 vi /etc/vsftpd/vs ...

  5. Ubuntu上安装python模块

    sudo apt-get install python-pip   ----先安装 pip模块 sudo pip install openpyxl ---通过pip安装python模块

  6. 在浏览器地址栏输入www.baidu.com到打开百度首页这期间到底发生了什么？

    刚才无意间看到这么一个面试题,觉得有点意思,我想从五层网络模型的角度说说我的看法. 1.首先通过DNS域名系统向域名服务器发送域名解析请求来得到百度的IP地址39.156.69.79:2.系统通过AR ...

  7. CSV和JSON格式相互转换

    1.为什么要进行CSV与JSON格式之间的转换 CSV格式常用于一二维数据表示和存储,他是一种纯文本形式存储表格数据的表示方式.JSON也可以表示一二维数据.在网络信息传输中,可能需要统一表示方式,因 ...

  8. [python / selenium] - 用python刷公选课是一种什么体验？

    前言 看公选课还是能学到很多知识的,这里是给大家提供一个selenium的使用思路(好好学公选课,我真的看了) 思路 当观看者移动鼠标到某一范围时就会停止播放,就让selenium一直将鼠标悬停在视频 ...

  9. Linux习题小结

    1.输出当前下的目录.ls -l 长格式输出. (1)使用grep 因为第一个 ls -l 的第一个标识代表的是文件类型,所以使用 grep 过滤以 d 开头的行,输出的就只是目录了. 正则表达式 g ...

  10. Java中的String为什么要设计成不可变的？

    一.不可变类和不可变对象 Normally,you create an object and allow its contents to be changed later.However ,occas ...