vue项目在webpack2实现移动端字体自适配功能


Posted in Javascript onJune 02, 2020

使用vue开发移动端页面时,往往需要实现页面根据不同设备屏幕进行尺寸的适配,实现将px自动换算成rem单位,其实只需要安装下面的两个插件即可快速实现移动端适配问题。

1 准备工作:
a. 安装 px2rem-loader 插件:npm install px2rem-loader --save;

b. 安装 lib-flexible 插件:npm install lib-flexible --save;

2 插件的作用:
px2rem-loader插件的作用:我们通过配置基准,实现将px自动换算成rem,
lib-flexible插件的作用:根节点会根据页面视口变化而变化font-size大小。

3 在utils.js文件配置px2rem-loader:
安装完上边两个插件后,可以在package.json中查看到是否安装成功,以及他们的版本信息,其实一般安装插件时,如果没有自己指定版本,基本都会自动安装最新的版本。

vue项目在webpack2实现移动端字体自适配功能

4.打开build目录里边的utils.js文件:

vue项目在webpack2实现移动端字体自适配功能

找到下边对应的位置,添加红色框的代码:

比如我拿到的是750的设计稿,而我这里又配置成以750为基准,所以写样式时,设计稿标注的是多少px我就直接写成多少px就行,浏览器会自动换算rem单位。

vue项目在webpack2实现移动端字体自适配功能

在当前文件中,找到下边的generateLoaders (loader, loaderOptions)方法,将刚才新加的px2remLoader对象添加到下边下划线位置即可

vue项目在webpack2实现移动端字体自适配功能

然后打开当前项目的首页入口文件index.html:

vue项目在webpack2实现移动端字体自适配功能

新增meta标签:

vue项目在webpack2实现移动端字体自适配功能

关于上图中meta标签里边相关属性的简单描述:

viewport:简单来说就是指当前移动设备浏览器用于显示网页内容的可视区域,移动设备一般会自动给它设置默认值为980px或1024px(详细信息有兴趣可以自行网上查看下);

width=device-width:表示当前布局视口与理想视口一致 ( js获取理想视口:window.screen.width )。

initial-scale:设置页面初次显示时的缩放比例,值为1.0时表示当前显示的是未经缩放的页面。

其实在content里边还可以设置其它属性,比如:

maximum-scale:页面的最大缩放比例;

minimum-scale:页面的最小缩放比例;

user-scalable:用户是否可以手动缩放页面,值可以为no或yes,分别表示不允许缩放和允许缩放。

4 在项目中使用lib-flexible:

只需要在当前项目的main.js中引入:lib-flexible/flexible

vue项目在webpack2实现移动端字体自适配功能

5 效果:

vue项目在webpack2实现移动端字体自适配功能
vue项目在webpack2实现移动端字体自适配功能

6 总结:

通过上边在utils.js文件中对使用px2rem进行相关的中配置后,成功实现了自动将px换算成rem;

在main.js中引入lib-flexible/flexible,成功实现根节点根据页面视口变化而变化font-size大小。

画重点:
配置了rem,项目中样式直接写px就行,浏览器中看到的都是自动换算成rem的

到此这篇关于vue项目在webpack2实现移动端字体自适配的文章就介绍到这了,更多相关vue webpack2 移动端字体自适配内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 #Javascript
实例分析javascript中的异步
Jun 02 #Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 #Javascript
js简单实现自动生成表格功能示例
Jun 02 #Javascript
JS中准确判断变量类型的方法
Jun 01 #Javascript
Vuex中的Mutations的具体使用方法
Jun 01 #Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 #Javascript
You might like
PHP中GET变量的使用
2006/10/09 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
10个php函数实用却不常见
2015/10/13 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
React组件之间的通信的实例代码
2017/06/27 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
python使用paramiko模块实现ssh远程登陆上传文件并执行
2014/01/27 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python上下文管理器和with块详解
2017/09/09 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
详解Python装饰器
2019/03/25 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
应届本科生推荐信范文
2013/12/25 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
六查六看心得体会
2014/10/14 职场文书
2014年项目工作总结
2014/11/24 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js