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使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 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网站基础优化方法小结
2008/09/29 PHP
php中设置多级目录session的问题
2011/08/08 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP学习笔记之session
2018/05/06 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
js获取json元素数量的方法
2015/01/27 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python中is与==判断的区别
2017/03/28 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Python重新加载模块的实现方法
2018/10/16 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Django 后台获取文件列表 InMemoryUploadedFile的例子
2019/08/07 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python双链表原理与实现方法详解
2020/02/22 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
食品行业求职人的自我评价
2014/01/19 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
小马王观后感
2015/06/11 职场文书
防溺水主题班会教案
2015/08/12 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
Java 实现限流器处理Rest接口请求详解流程
2021/11/02 Java/Android
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技