注:不转换的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. Go使用变量类型声明和方法的注意事项

    当我们通过把一个现有(非interface)的类型定义为一个新的类型时,新的类型不会继承现有类型的方法. 神马意思?来一段简短错误的代码: package main import "sync ...

  2. GO基础之接口

    一.概念1. 面向对象语言中,接口用于定义对象的行为.接口只指定对象应该做什么,实现这种行为的方法(实现细节)是由对象来决定.2. 在Go语言中,接口是一组方法签名. •接口只指定了类型应该具有的方法 ...

  3. 从0系统学Android--3.2四种基本布局

    从0系统学Android--3.2四种基本布局 本系列文章目录:更多精品文章分类 本系列持续更新中.... 3.3 系统控件不够用?创建自定义控件 上一节我们学习了 Android 中的一些常用的控件 ...

  4. CentOS7 如何升级Git

    CentOS7自带的git版本1.8.3.1,这个版本有点低了.于是决定折腾升级,我首先想到的是用update更新: yum update git 结果,事与原违,还是1.8.3.1.在网上提供的升级 ...

  5. [PHP] RBAC权限与审批流的简单数据库构想

    权限部分:功能权限+数据权限 控制权限是界面按钮菜单的权限控制,数据权限是数据范围的控制 role(角色) ----------------- |id | ----------------- |nam ...

  6. java 主动信任证书

    java 主动信任证书 SSLContext sslcontext = SSLContexts.custom().loadKeyMaterial(keyStore, mid.toCharArray() ...

  7. vue 父子父组件通过props传父页面请求后的数据

    父子父组件通过props传父页面请求后的数据,则在父页面的子组件上加上判断数据是否存在即可,如下 <gl-line-bar v-if="oneWeekBetEcharts" ...

  8. Spring Cloud Alibaba 实战(十一) - Spring Cloud认证授权

    欢迎关注全是干货的技术公众号:JavaEdge 本文主要内容: 如何实现用户认证与授权? 实现的三种方案,全部是通过画图的方式讲解.以及三种方案的对比 最后根据方案改造Gateway和扩展Feign ...

  9. vue定义data的三种方式与区别

    在vue中,定义data可以有三种写法. 1.第一种写法,对象. var app = new Vue({ el: '#yanggb', data: { yanggb: 'yanggb' } }) 2. ...

  10. 查看Oracle被锁的表以及如何解锁

    注意权限问题 1.查看是否有被锁的表: select b.owner,b.object_name,a.session_id,a.locked_modefrom v$locked_object a,db ...