这应该是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的更多相关文章

  1. vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案

    最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...

  2. vue 二三倍图适配,1像素边框

    //文件名为mixin.scss// 2,3倍图适配 @mixin bg-image($url){ background-image: url("~imgs/icon/" + $u ...

  3. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  4. Vue中的$Bus使用

    Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两 ...

  5. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  6. vue中的重要特性

    一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  7. iOS 的 APP 在系统中如何适配不同的屏幕的尺寸

    iOS 的 APP 在系统中如何适配不同的屏幕的尺寸 标签: 2007年,初代iPhone发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到iPhone ...

  8. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  9. vue中使用stompjs实现mqtt消息推送通知

    最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...

随机推荐

  1. Java 8 新特性:3-函数(Function)接口

    (原) 以前,在创建泛型时,是这么写的: List<String> list = new ArrayList<String>(); 现在,可以这么写了: List<Str ...

  2. C# 编写windows服务及服务的安装、启动、删除、定时执行任务

    一.编写windows服务 1.VS2017  - 创建服务Myservice 2.创建好项目之后 --- >> 双击 Service1.cs  ---- >>  出现一个设计 ...

  3. UVA12113-Overlapping Squares(二进制枚举)

    Problem UVA12113-Overlapping Squares Accept:116  Submit:596 Time Limit: 3000 mSec  Problem Descripti ...

  4. [Vani有约会]雨天的尾巴

    嘟嘟嘟 看到链上操作,自然想到树剖. 先考虑序列上的问题:那么区间修改可以用差分.所以我们把操作拆成\(L\)和\(R + 1\)两个点,然后离线.排序后扫一遍,用线段树维护数量最多的颜色是哪一个. ...

  5. PHP消息队列的实现方式与详解,值得一看

    队列原理: 也是解耦的原理:业务系统和队列处理系统没有关系 一个写(业务系统),一个读(队列管理系统). 写的只管往队列里写,别的不用操心,读的能不能读完和写的也没有关系 同样,读的只管从队列里往外读 ...

  6. Luogu3605 [USACO17JAN]Promotion Counting晋升者计数

    Luogu3605 [USACO17JAN]Promotion Counting晋升者计数 给一棵 \(n\) 个点的树,点 \(i\) 有一个权值 \(a_i\) .对于每个 \(i\) ,求 \( ...

  7. c# 利用百度图像处理【人像分割】一键抠图

    百度AI开放平台-人像分割: http://ai.baidu.com/tech/body/seg 注意本文后面的话,百度这个技术效果太差劲了,国外这 https://www.remove.bg/ 个比 ...

  8. 蓝牙Legacy Pairing流程概述

    Legacy pairing 从名字上看可以知道它是老式设备采用的配对方法. 配对的最终目的是为了生成key,key可以给链路加密,保证双方设备通信的安全性.那配对流程的讲述其实就是key的生成过程. ...

  9. 吉特日化MES-日化行业原料仓库所见问题汇总

    2018年工作主要面向的是日化行业,其中包括日化生产以及日化生产原料仓库,和以往接触到仓库有点不一样在于日化行业原料的特性问题,日化行业的原料基本以粉尘和液体为主. 1. 原料的形态上: 日化行业原料 ...

  10. 使用C#创建SQLite控制台应用程序

    本文属于原创,转载请注明出处,谢谢! 一.开发环境 操作系统:Windows 10 X64 开发环境:VS2015 编程语言:C# .NET版本:.NET Framework 4.0 目标平台:X86 ...