详解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的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
JavaScript Array.flat()函数用法解析
Sep 02 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会话控制:Session与Cookie详解
2014/09/27 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
使用Nginx+uWsgi实现Python的Django框架站点动静分离
2016/03/21 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
运动会200米广播稿
2015/08/19 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
Redis 哨兵机制及配置实现
2022/03/25 Redis