详解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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
javascript实用方法总结
Feb 06 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
基于游标的分页接口实现代码示例
Nov 12 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
three.js如何实现3D动态文字效果
Mar 03 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
JavaScript高级程序设计 扩展--关于动态原型
2010/11/09 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
前端常见跨域解决方案(全)
2017/09/19 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
10个顶级Python实用库推荐
2021/03/04 Python
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
办公室助理岗位职责
2013/12/25 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
大学新学期计划书
2014/04/28 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
道路施工安全责任书
2014/07/24 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
课题研究阶段性总结
2015/08/13 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL