vue中的适配:px2rem
这应该是vue项目在适配移动端时候,最简单的方法之一
下面是基本步骤(使用cnpm)
1.下载并引入lib-flexible
cnpm install --save lib-flexible
在main.js中 :import ‘lib-flexible/flexible’
2.引入px2rem-loader
cnpm install --save px2rem-loader
3.将px2rem-loader添加到cssLoaders
在build/util.js中添加如下代码


代码如下
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75//这个是重点,设计稿是750px
}
}
const loaders = [cssLoader,px2remLoader]
完了就可以直接用px做单位按照750的设计稿撸代码了,
vue中的适配:px2rem的更多相关文章
- vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案
最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...
- vue 二三倍图适配,1像素边框
//文件名为mixin.scss// 2,3倍图适配 @mixin bg-image($url){ background-image: url("~imgs/icon/" + $u ...
- vue中引入mintui、vux重构简单的APP项目
最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...
- Vue中的$Bus使用
Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两 ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- iOS 的 APP 在系统中如何适配不同的屏幕的尺寸
iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
随机推荐
- 51nod 1238 最小公倍数之和 V3
51nod 1238 最小公倍数之和 V3 求 \[ \sum_{i=1}^N\sum_{j=1}^N lcm(i,j) \] \(N\leq 10^{10}\) 先按照套路推一波反演的式子: \[ ...
- Linux之权限详解
如何知道你有什么权限 我能干什么?这是我最关心的问题! 切换到普通用户 [root@luffy-01 ~]# su - pizza [pizza@luffy-01 ~]$ ls /root ls: c ...
- [tool] google搜索的正确使用姿势(待补全)
第一,也是非常重要的前提,请一定要能FQ.如果这条没有解决,没有往下的必要 现在我假设你已经能FQ了,个人推荐使用搜索引擎的顺序: Google>微软bing国际搜索>百度 (百度总能给你 ...
- Linux:Day3 文件系统
Linux的文件系统: 根文件系统(rootfs):root filesystem /boot:引导文件存放目录:内核文件(vmlinuz).引导加载器(bootloader,grub)都存放于此目录 ...
- (二 -3) 天猫精灵接入Home Assistant-自动发现Mqtt设备--灯系列
参考网站 1该mqtt光平台可以让您控制您的MQTT启用灯.它支持设置亮度,色温,效果,闪烁,开/关,RGB颜色,过渡,XY颜色和白色值. https://www.home-assistant.io/ ...
- python3 练习题 day04
'''1.整理装饰器的形成过程,背诵装饰器的固定格式''''''开放封闭原则:为了保证程序的稳定性,和功能的可开放性,在不修改目标函数源代码和调用方式的情况下,对目标函数增加新功能'''# def w ...
- Python中print和return的区别
有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10742671.html 一.解释 1.ret ...
- [Micropython]TPYBoard v202 v102+v202 家庭无线温湿度检测
一.实验器件 1.TPYBoard v102 1块 2.TPYBoard v202 1块 3.Nokia 5110LCD显示屏 1块 4.DHT11温湿度传感器 1个 5.micro USB 数据线 ...
- java 在实例化异常的时候做的事情
new Exception 这段代码,会调用父类ThrowAble的构建方法,在构造方法中会调用fillInstackTrace这个native方法. 会把当前线程异常发生的信息,上下文记录在栈调用指 ...
- mysql 性能优化思路 - mysqldumpslow /tmp/mysql-slow.log 字符集 utf-8 create database
提高MySQL服务的性能,响应速度: 1.替换有问题的硬件:内存,CPU,磁盘 2.服务的配置参数的配置 3.SQL的优化 .服务参数的配置: 1.1 连接数,连接超时: max_connection ...