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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
浅析JavaScript动画
Jun 10 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
Angular的MVC和作用域
Dec 26 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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函数serialize()与unserialize()用法实例
2014/11/06 PHP
php实现高效获取图片尺寸的方法
2014/12/12 PHP
php简单压缩css样式示例
2016/09/22 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
django 模型字段设置默认值代码
2020/07/15 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python 实现客户端与服务端的通信
2020/12/23 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
新春文艺演出主持词
2014/03/27 职场文书
个人求职自荐信范文
2014/06/20 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
就业意向书范本
2015/05/11 职场文书
长江七号观后感
2015/06/11 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
2016年教师节慰问信
2015/12/01 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫