注:不转换的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. Spring基础——配置文件pom.xml,web.xml,ApplicationContext.xml

    Spring配置文件——复制粘贴即用 为了以后兼容SSM框架,直接创建Maven Project,包结构如下图. pom.xml <project xmlns="http://mave ...

  2. English:Day-to-day 1104

    \ ------------------------------ editor by enomothem ------------------------------ It snowed throug ...

  3. 微信小程序——表单验证插件WxValidate的二次封装(终极版)

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, ...

  4. Linux后台运行和关闭jar项目

    直接用java -jar xxx.jar,当退出或关闭shell时,程序就会停止掉.以下方法可让jar运行后一直在后台运行. java -jar server.jar & 如果想要关闭java ...

  5. <深度学习>TensorBoard的demo

    import tensorflow.compat.v1 as tf import os os.environ["CUDA_VISIBLE_DEVICES"] = "-1& ...

  6. 粗糙集理论(Rough Set Theory)

    粗糙集理论(Rough Set Theory) 一种数据分析处理理论. <粗糙集—关于数据推理的理论>. 数据挖掘(Data Mining)和知识发现(KDD). 集合近似定义的基本思想及 ...

  7. 25.推荐---协同过滤(Collaborative Filtering)

    协同过滤需要注意的三点: gray sheep(有人喜欢追求特别,协同过滤一般只能从共同的人或物间找相似) shilling attack(水军刷好评导致数据错误,无法带来精确的推荐) cold st ...

  8. CSharpGL(56)[译]Vulkan入门

    CSharpGL(56)[译]Vulkan入门 本文是对(http://ogldev.atspace.co.uk/www/tutorial50/tutorial50.html)的翻译,作为学习Vulk ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

  10. Nginx安装及配置反向代理

    本片博客记录在ubuntu16下安装nginx,以及如何实现负载均衡 安装nginx 如果是新机器,安装相关依赖环境 sudo apt install build-essential sudo apt ...