详解vue中移动端自适应方案


Posted in Javascript onMay 05, 2019

方案1:

直接引入js  (自己 写的动态改变fontsize的js)

function htRem() {
	  var ww = document.documentElement.clientWidth;
	  if (ww > 750) {
	    ww = 750;
	  }
	  document.documentElement.style.fontSize = ww / 7.5 + "px";
	}
	htRem();
	window.onresize = function() {
	  htRem();
	};

在main.js中import引入即可
方案二:手淘的 lib-flexible + rem

配置 flexible

安装 lib-flexible

在命令行中运行如下安装:

npm i lib-flexible --save

引入 lib-flexible

在项目入口文件 main.js 里 引入 lib-flexible

// main.js
import 'lib-flexible'

添加 meta 标签

在项目根目录的 index.html 中添加如下 meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

px 转 rem

实际开发中,我们通过设计稿得到的值单位是 px,所以要将 px 转换成 rem 再写进样式中。
将 px 转换成 rem 我们将使用 px2rem 这个工具,它有 webpack 的 loader:px2rem-loader

安装 px2rem-loader

在命令行中运行如下安装:

npm i px2rem-loade --save-dev

配置 px2rem-loade

在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。

我们只需在 cssLoader 后再加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible 的方案,我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10,这里我们假设设计稿宽为 750px。

// utils.js
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
// ...

并放进 loaders 数组中

// utils.js
function generateLoaders(loader, loaderOptions) {
var loaders = [cssLoader, px2remLoader]
// ...

修改配置后需要重启,然后我们在组件中写单位直接写 px,设计稿量多少就可以写多少了,舒服多了。

以上所述是小编给大家介绍的vue移动端自适应详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
Javascript倒计时页面跳转实例小结
Sep 11 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 #Javascript
彻底揭秘keep-alive原理(小结)
May 05 #Javascript
angular4+百分比进度显示插件用法示例
May 05 #Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 #Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 #Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 #Javascript
浅谈Node 异步IO和事件循环
May 05 #Javascript
You might like
PHP安全防范技巧分享
2011/11/03 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
微信小程序入门教程
2016/11/18 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
python利用高阶函数实现剪枝函数
2018/03/20 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Django多数据库联用实现方法解析
2020/11/12 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
淘宝网店营销策划书
2014/01/11 职场文书
建议书怎么写
2014/03/12 职场文书
卖房协议书
2014/04/11 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL