详解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笔记一 js以及json基础使用说明
May 22 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
Apr 08 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
angular2使用简单介绍
Mar 01 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
JS打印组合功能
Aug 04 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 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函数常用用法小结
2010/02/08 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python定时执行指定函数的方法
2015/05/27 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
详解CSS3中@media的实际使用
2015/08/04 HTML / CSS
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
年终自我鉴定
2013/10/09 职场文书
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
房产公证书范本
2014/04/10 职场文书
兽医医药专业求职信
2014/07/27 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
工资证明格式模板
2015/06/12 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android