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 相关文章推荐
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
vue-cli 关闭热更新操作
Sep 18 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页面编码的两种方法示例介绍
2014/03/03 PHP
JavaScript 字符串乘法
2009/08/20 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
浅谈五大Python Web框架
2017/03/20 Python
解读! Python在人工智能中的作用
2017/11/14 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
青年文明号复核材料
2014/02/11 职场文书
学生会招新策划书
2014/02/14 职场文书
企业年度评优方案
2014/06/02 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
司机岗位职责
2015/02/04 职场文书
追悼词范文大全
2015/06/23 职场文书