详解基于vue-cli配置移动端自适应


Posted in Javascript onJanuary 13, 2018

之前写过一篇关于移动端屏幕适配:移动端屏幕适配的解决,今天来聊一聊基于vue-cli配置的移动端屏幕适配问题。

配方还是一样:手淘的 lib-flexible + rem

配置 flexible

安装 lib-flexible

在命令行中运行如下安装:

npm i lib-flexible --save

引入 lib-flexible

在项目入口文件 main.js 里 引入 lib-flexible

// main.js
import 'lib-flexible'

添加 meta 标签

在项目根目录的 index.html 中添加如下 meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

px 转 rem

实际开发中,我们通过设计稿得到的值单位是 px,所以要将 px 转换成 rem 再写进样式中。

将 px 转换成 rem 我们将使用 px2rem 这个工具,它有 webpack 的 loader:px2rem-loader

安装 px2rem-loader

在命令行中运行如下安装:

npm i px2rem-loade --save-dev

配置 px2rem-loade

在 vue-cli 生成的 webpack 配置中,vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。

我们只需在 cssLoader 后再加上一个 px2remLoader 即可,px2rem-loader 的 remUnit 选项意思是 1rem=多少像素,结合 lib-flexible 的方案,我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10,这里我们假设设计稿宽为 750px。

// utils.js
var cssLoader = {
 loader: 'css-loader',
 options: {
  minimize: process.env.NODE_ENV === 'production',
  sourceMap: options.sourceMap
 }
}
var px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 75
 }
}
// ...

并放进 loaders 数组中

// utils.js
function generateLoaders(loader, loaderOptions) {
 var loaders = [cssLoader, px2remLoader]
 // ...

修改配置后需要重启,然后我们在组件中写单位直接写 px,设计稿量多少就可以写多少了,舒服多了。

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

Javascript 相关文章推荐
基于jquery的页面划词搜索JS
Sep 14 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
javascript用rem来做响应式开发
Jan 13 #Javascript
深入理解ES6之数据解构的用法
Jan 13 #Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 #Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 #Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 #Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 #Javascript
js 索引下标之li集合绑定点击事件
Jan 12 #Javascript
You might like
php实现paypal 授权登录
2015/05/28 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python3抓取中文网页的方法
2015/07/28 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
什么是python的列表推导式
2020/05/26 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
优秀教师演讲稿
2014/05/06 职场文书
元旦趣味活动方案
2014/08/22 职场文书
倡议书的格式写法
2015/04/28 职场文书
早会开场白台词大全
2015/06/01 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python