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 相关文章推荐
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
Jan 15 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
js+canvas实现纸牌游戏
Mar 16 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php实现网站插件机制的方法
2009/11/10 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
js字符编码函数区别分析
2008/06/05 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
通过webpack引入第三方库的方法
2018/07/20 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
在Docker上开始部署Python应用的教程
2015/04/17 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python 备份程序代码实现
2017/03/06 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
2014年体育教师工作总结
2014/12/03 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
MySQL数据库简介与基本操作
2022/05/30 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers