vue项目中使用lib-flexible解决移动端适配的问题解决


Posted in Javascript onAugust 23, 2018

第一部分:项目中引入lib-flexible

一、项目中安装lib-flexible

$ npm install lib-flexible --save

二、在项目的入口js文件中引入lib-flexible

import 'lib-flexible'

通过要以上两步,就完成了在vue项目使用lib-flexible来解决移动端适配了。

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px,此时1rem应该等于75px。假如量的某个元素的宽度是150px,那么在css里面定义这个元素的宽度就是 width: 2rem

注意:

    1.检查一下html文件的head中,如果有 meta name="viewport"标签,需要将他注释掉,因为如果有这个标签的话,lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。

    2.因为html的font-size是根据屏幕宽度除以10计算出来的,所以我们需要设置页面的最大宽度是10rem。

    3.如果每次从设计稿量出来的尺寸都手动去计算一下rem,就会导致我们效率比较慢,还有可能会计算错误,所以我们可以使用px2rem-loader自动将css中的px转成rem

第二部分:使用px2rem-loader自动将css中的px转换成rem

一、安装px2rem-loader

$ npm install px2rem-loader --save-dev

二、配置px2rem-loader

1.打开build/utils.js文件,找到exports.cssLoaders方法,在里面添加如下代码

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
   remUint: 75
  }
 }

2.修改generateLoaders方法中的loaders

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
 loaders.push(postcssLoader)
}

然后重新npm run dev,打开控制台可以看到代码中的px已经被转成了rem

注意:

1.此方法只能将.vue文件style标签中的px转成rem,不能将script标签和元素style里面定义的px转成rem

2.如果在.vue文件style中的某一行代码不希望被转成rem,只要在后面写上注释 /* no*/就可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 Javascript
从零开始学习搭建React脚手架项目
Aug 23 #Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 #Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 #Javascript
JS实现的简单分页功能示例
Aug 23 #Javascript
JavaScript实用代码小技巧
Aug 23 #Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 #jQuery
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 #Javascript
You might like
PHP音乐采集(部分代码)
2007/02/14 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Yii2中关联查询简单用法示例
2016/08/10 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
基于three.js编写的一个项目类示例代码
2018/01/05 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
如何高效使用Python字典的方法详解
2017/08/31 Python
Python多进程fork()函数详解
2019/02/22 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
事假请假条范文
2014/04/11 职场文书
团日活动总结书
2014/05/08 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
民族团结演讲稿范文
2014/08/27 职场文书
领导新年致辞2016
2015/07/29 职场文书
大学生支教感言
2015/08/01 职场文书
PyTorch的Debug指南
2021/05/07 Python
Django框架中视图的用法
2022/06/10 Python