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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
JS 5种遍历对象的方式
Jun 16 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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函数常用用法小结
2010/02/08 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
使用php实现截取指定长度
2013/08/06 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python学习入门之区块链详解
2017/07/25 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Pycharm github配置实现过程图解
2020/10/13 Python
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
家具商场的活动方案
2014/08/16 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL