注:不转换的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. python面向对象-1

    1.面向对象的思想优点 优点: 简化代码 ,构建公共模板 ,扩展性强 思想: 类作为模板 ,对象通过模板实例化对象 ,对象去做事 ,抽象将显示存在的事物使用代码体现 2.三大特性 封装(狭义) : 对 ...

  2. 基于Maven 的 Spring MVC

    Spring MVC 他是基于MVC的设计模式做出来的,他是Spring对Servlet的进一步的封装 MVC:Model  View  Controller 如何使用Spring MVC?(Spri ...

  3. Docker 中卷组管理

    一.概念 数据卷是一个可供一个或多个容器使用的特殊目录实现让容器的一个目录和宿主机中的一个文件或者目录进行绑定.数据卷 是被设计用来持久化数据的,对于数据卷你可以理解为NFS中的哪个分享出来的挂载点, ...

  4. Windows系统Git安装教程(详解Git安装过程)

    Windows系统Git安装教程(详解Git安装过程)   今天更换电脑系统,需要重新安装Git,正好做个记录,希望对第一次使用的博友能有所帮助! 获取Git安装程序   到Git官网下载,网站地址: ...

  5. 中小后台系统UI框架--EasyUI

    后台开发人员不擅长前端UI界面,而小型软件公司没有专职美工岗位,开发人员只能借助开源UI框架,复用已有组件,完成用户操作界面.EasyUI是基于jQuery的UI插件集合体,可帮助开发者轻松构建网页. ...

  6. Liu Junqiao:工作中用到的命令以及问题汇总

    工作中用到的命令以及问题汇总 2019-11-29 查看系统运行时间,这个问题是因为我们在阿里云上有个机器,在某一天发现这台机器上有的服务莫名奇妙的停了,然后排查时怀疑机器被重启过用如下如下命令查看了 ...

  7. 更改路由器的外网IP

    此方法适用于通过路由器拨号上网的宽带,若宽带通过光猫拨号上网则需要将光猫改为桥接模式并在路由器中配置宽带账号和密码 测试环境: 路由器:TP-LINK TL-WDR7800千兆版 硬件版本:1.0 软 ...

  8. nodejs攻略——第一章 配置

    nodejs这玩意吧,我也是心血来潮的学习,所以啊.看这篇文章之前请大家有以下技能,如果没有..我不确定你能看得懂,毕竟我文采水平实在有限. 前置技能要求: c#或java 熟练+ JavaScrip ...

  9. [译]Vulkan教程(29)组合的Image采样器

    [译]Vulkan教程(29)组合的Image采样器 Combined image sampler 组合的image采样器 Introduction 入门 We looked at descripto ...

  10. Spring Cloud Alibaba 实战(十三) - Sleuth调用链监控

    本文概要:大白话剖析调用链监控原理,然后学习Sleuth,Zipkin,然后将Sleuth整合Zipkin,最后学习Zipkin数据持久化(Elasticsearch)以及Zipkin依赖关系图 实战 ...