详解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 拾漏补遗
Dec 27 Javascript
GreyBox技术总结(转)
Nov 23 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
老生常谈js数据类型
Aug 03 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
使用webpack和rollup打包组件库的方法
Feb 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实现的短网址算法分享
2014/06/20 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
javascript some()函数用法详解
2014/11/13 PHP
php删除指定目录的方法
2015/04/03 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
Yii使用技巧大汇总
2015/12/29 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python数组循环处理方法
2019/08/26 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
企业优秀员工事迹材料
2014/05/28 职场文书
python中print格式化输出的问题
2021/04/16 Python
python cv2图像质量压缩的算法示例
2021/06/04 Python
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS