详解基于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 相关文章推荐
农历与西历对照
Sep 06 Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
Javascript中的数学函数
2007/04/04 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
Python进阶之尾递归的用法实例
2018/01/31 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Python 通过监听端口实现唯一脚本运行方式
2020/05/05 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
采购内勤岗位职责
2013/12/10 职场文书
自荐信需注意事项
2014/01/25 职场文书
乔迁之喜主持词
2014/03/27 职场文书
乐山大佛导游词
2015/02/02 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
Python中如何处理常见报错
2022/01/18 Python