详解基于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中showModalDialog 的使用解析
Apr 17 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
json的使用小结
Jun 08 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
vue-iview动态新增和删除的方法
Jun 17 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
JavaScript中的依赖注入详解
2015/03/18 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
python入门之井字棋小游戏
2020/03/05 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
深入了解Python 变量作用域
2020/07/24 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
大学学习生活感言
2014/01/18 职场文书
函授自我鉴定范文
2014/02/06 职场文书
三方合作协议书范本
2014/04/18 职场文书
旷课检讨书500字
2014/10/14 职场文书
教师个人成长总结
2015/02/11 职场文书
单位推荐信范文
2015/03/27 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
pytorch实现手写数字图片识别
2021/05/20 Python