详解基于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 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP下载远程图片的几种方法总结
2017/04/07 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
JQuery常用选择器功能与用法实例分析
2019/12/23 jQuery
vue-router定义元信息meta操作
2020/12/07 Vue.js
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python提取网页中超链接的方法
2016/09/18 Python
django实现用户登陆功能详解
2017/12/11 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
铭立家具面试题
2012/12/06 面试题
银行进社区活动总结
2014/07/07 职场文书
歌剧魅影观后感
2015/06/05 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS