详解基于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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
基于jquery实现五星好评
Nov 18 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP中操作ini配置文件的方法
2013/04/25 PHP
php旋转图片90度的方法
2013/11/07 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
php bootstrap实现简单登录
2016/03/08 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python pandas库的安装和创建
2019/01/10 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
给客户的道歉信
2014/01/13 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
2014年教研室工作总结
2014/12/06 职场文书
民间借贷被告代理词
2015/05/23 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript
利用js实现简单开关灯代码
2021/11/23 Javascript