关于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 相关文章推荐
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
将查询条件的input、select清空
Jan 14 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 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
截获网站title标签之家内容的例子
2006/10/09 PHP
浅析php数据类型转换
2014/01/09 PHP
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python socket模块方法实现详解
2019/11/05 Python
Python底层封装实现方法详解
2020/01/22 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
村党支部对照检查材料思想汇报
2014/09/28 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
商务邀请函
2015/01/30 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
golang 实现两个结构体复制字段
2021/04/28 Golang