vue-cli 项目里屏幕自适应
很多同学可能在写h5的时候,也会遇到移动端如何控制屏幕自适应问题!
在移动端网页开发中,我们可以用手机淘宝的flexible.那么在vue当中,也同样可以用!
接下来就介绍下如何在vue-cli配置的项目里来实现屏幕自适应
一、首先,我们需要安装flexible库.
项目目录下 cmd命令:npm install lib-flexible
二、然后在项目入口文件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 install px2rem-loader
五、然后就是配置这个工具,由于是loader文件,所有的loader文件都是在until.js文件里的一个方法生成的.
我们只要在until.js里找到cssLoader这个对象,在它下面再加一个px2remLoader对象即可
代码如图:

这样就配置完成了,之后命令重启项目,我们只需要在设计稿里量到多少写多少了!
比如:在设计稿里量到title的字体大小为18px,那么在项目中就直接写18px,是不是特爽!
原文链接地址:https://www.cnblogs.com/zlbrother/p/7823380.html
vue-cli 项目里屏幕自适应的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue cli 项目的提交
前提: 配置git.以及git的ssh key信息 假设已经都安装好了,此处我用vue项目为例,因为vue-cli已经默认为我生成了ignore文件 在项目目录 初始化本地仓库,会创建一个.git目录 ...
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- 如何在Vue的项目里对element的表单验证进行封装
介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- Vue cli项目开启Gzip
目录 安装 compression-webpack-plugin 更改配置文件 服务器开启gzip功能 安装 compression-webpack-plugin 建议安装v1.1.11版本,最新版本 ...
- vue/cli项目添加外部js文件的一个方法
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
随机推荐
- DAY18 常用模块(二)
一.随机数:RANDOM 1.(0,1)小数:random.random() 2.[1,10]整数:random.randint(1,10) 3.[1,10)整数:random.randrang(1, ...
- C#通过DocX创建word
网上有一些基础的东西,但是比如插入图片,就没有找到方案,最终自己摸索出来的. 1.首先通过Nuget获取引用,关键字:“DocX” 2.示例代码 class Program { static void ...
- 在docker中快速创建包含ip相关tool的ubuntu镜像
在docker学习中需要创建轻量级的,包含ip相关工具的容器,支持ping,ip,ethtool,brctrl等相关指令. 下面就是快速创建一个满足需求的ubunut镜像的过程: 1) 在docker ...
- Android系统下app测试功能点
一.安装卸载 1.验证app能否正常的安装启动运行,安装后的文件夹及文件是否写到了指定的目录里,卸载后相关文件是否清除 2.软件安装/卸载过程中意外情况的处理是否符合需求(如死机,重启,断电) 3.安 ...
- mybatis 动态sql和参数
mybatis 动态sql 名词解析 OGNL表达式 OGNL,全称为Object-Graph Navigation Language,它是一个功能强大的表达式语言,用来获取和设置Java对象的属性, ...
- 【HDU - 1429】胜利大逃亡(续) (高级搜索)【状态压缩+BFS】
Ignatius再次被魔王抓走了(搞不懂他咋这么讨魔王喜欢)…… 这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带锁的门,钥匙藏在地牢另外的某些地方.刚开 ...
- 虚拟机中安装Linux系统
本教程的运行环境:Windows 10 , 虚拟机 VirtualBox,Ubuntu 16.04 1.准备 下载 VirtualBox 下载OVA镜像64位 http://releases.ubun ...
- git设置用户名和邮箱
用git config --global user.name "your name"命令来设置你的用户名 用git config --global user.email " ...
- IOCP模型与网络编
一.前言: 在老师分配任务(“尝试利用IOCP模型写出服务端和客户端的代码”)给我时,脑子一片空白,并不知道什么是IOCP模型,会不会是像软件设计模式里面的工厂模式,装饰模式之类的那些呢 ...
- sql 2012 用户sa登陆不上
1.通过Windows身份验证进入服务器 2.点击“安全性”--“登录名”--“sa” 3.右击sa,点击“属性” 4.取消“强制实施密码策略(F)”勾选 5.对密码重新输入 6.点击确定,重新用SQ ...