关于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获取当前ip的代码
May 10 Javascript
iphone safari不支持position fixed的解决方法
May 04 Javascript
js实现可得到不同颜色值的颜色选择器实例
Feb 28 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php导出生成word的方法
2015/12/25 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
iScroll.js 使用方法参考
2016/05/16 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
vue输入框使用模糊搜索功能的实现代码
2020/05/26 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
家具公司总经理岗位职责
2014/07/08 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
长城英文导游词
2015/01/30 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书