关于vue利用postcss-pxtorem进行移动端适配的问题


Posted in Javascript onNovember 20, 2019

刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了。稍微坐下总结:

1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而不要用webpack-simple,因为webpack里面很多插件加载器之类的都是给你预配好的,这样在项目构建中就不会遗漏什么。

2.cnpm install postcss-pxtorem -D安装postcss-pxtorem,此插件如果你用的是webpack的话只要进行安装即可,不需要另外进行配置,此插件是对px进行转换。

3.新建一个rem.js的文件,输入以下代码即可,然后在main.js中引用。

关于vue利用postcss-pxtorem进行移动端适配的问题

4.在项目的根目录下找到.postcssrc.js文件在文件内添加以下代码,一般750px的设计稿的根元素大小设置32.

关于vue利用postcss-pxtorem进行移动端适配的问题

5.重启项目就ok了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
Jquery实现自定义弹窗示例
Mar 12 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
使用vue-router为每个路由配置各自的title
Jul 30 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 #Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 #Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 #Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 #Javascript
详解Nuxt.js 实战集锦
Nov 19 #Javascript
javascript的delete运算符知识点总结
Nov 19 #Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 #Javascript
You might like
我的论坛源代码(一)
2006/10/09 PHP
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
Node.js事件驱动
2015/06/18 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Python中的面向对象编程详解(上)
2015/04/13 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
深入理解python多进程编程
2016/06/12 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python 实现ping测试延迟的两种方法
2020/12/10 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
后勤部长岗位职责
2013/12/14 职场文书
大学生先进事迹材料
2014/02/16 职场文书
党风廉政建设责任书
2014/04/14 职场文书
劳动竞赛口号
2014/06/16 职场文书
初中差生评语
2014/12/29 职场文书
2015年库房工作总结
2015/04/30 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
PHP实现两种排课方式
2021/06/26 PHP
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android