博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue-cli脚手架里如何配置屏幕自适应
阅读量:4112 次
发布时间:2019-05-25

本文共 676 字,大约阅读时间需要 2 分钟。

很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!

在移动端网页开发中,我们可以用手机淘宝的flexible.那么在vue当中,也同样可以用!
接下来就介绍下如何在vue-cli配置的项目里来实现屏幕自适应
首先,我们需要安装flexible库.
npm i lib-flexible --save
然后在项目入口文件main.js里引入lib-flexible
import 'lib-flexible'
记得配置meta标签,在index.html文件当中
<meta name="viewport" content="width=device-width, initial-scale=1.0">
接着,我们在项目当中写css的时候将px转成rem,我们可以借助px2rem这个工具,也是同样要安装

npm i px2rem-loader --save-dev

然后就是配置这个工具,由于是loader文件,所有的loader文件都是在until.js文件里的一个方法生成的.

我们只要在until.js里找到cssLoader这个对象,在它下面再加一个px2remLoader对象即可

image

然后放到下面的generateLoaders函数中loaders数组中

image

这样就配置完成了,之后重启项目,我们只需要在设计稿里量到多少写多少了!

比如:在设计稿里量到title的字体大小为18px,那么在项目中就直接写18px,是不是特爽!

有兴趣的朋友可以关注下本人今日头条号,分享的全是项目中的干货,还有面试题解答等

转载地址:http://porsi.baihongyu.com/

你可能感兴趣的文章
Linux子系统系列-I2C
查看>>
<iOS>关于自定义description的一点用法
查看>>
Unix 命令,常用到的
查看>>
DLL中建立进程共享数据段需要注意的语法问题
查看>>
服务器端技术----Http请求的处理过程
查看>>
如何区分 const char * p, char * const p, const char * * p?
查看>>
C语言-预处理指令2-条件编译
查看>>
C语言-预处理指令3-文件包含
查看>>
C语言-变量类型
查看>>
C语言-static和extern关键字1-对函数的作用
查看>>
C 语言-static和extern关键字2-对变量的作用
查看>>
C# 学习笔记(三) ForEach遍历集合
查看>>
C# 迭代器详解
查看>>
C# 学习笔记(四) 结构体实现接口后是值类型还是引用类型
查看>>
C# 装箱和拆箱
查看>>
C# 学习笔记(五) ++/--运算符重载的意义
查看>>
C# virtual和abstract的区别
查看>>
C++ VS2010中 C++创建DLL图解
查看>>
c# ==与equals有什么区别
查看>>
Sql Server中架构的理解
查看>>