详解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中的var_dump函数实现代码
Sep 07 Javascript
jquery实用代码片段集合
Aug 12 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
jQuery的position()方法详解
Jul 19 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
JSONObject使用方法详解
Dec 17 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 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 正则 过滤html 的超链接
2009/06/02 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP查询网站的PR值
2013/10/30 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
js实现下一页页码效果
2017/03/07 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Python 日期与时间转换的方法
2020/08/01 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
美德好少年事迹材料
2014/01/19 职场文书
基层党建工作汇报材料
2014/08/15 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
催款律师函范文
2015/05/27 职场文书
Python数据类型最全知识总结
2021/05/31 Python
Python中使用ipython的详细教程
2021/06/22 Python
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫