详解基于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 相关文章推荐
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
微信小程序实现列表左右滑动
Nov 19 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+dbfile开发小型留言本
2006/10/09 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
jquery简单体验
2007/01/10 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
临床医学应届生求职信
2013/11/06 职场文书
精彩的推荐信范文
2013/11/26 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
工程技术员岗位职责
2014/03/02 职场文书
大学生心理活动总结
2014/07/04 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
少年雷锋观后感
2015/06/10 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python