这应该是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. SQlite的结构——存储管理

    在今天的商业应用中,主要有两种基本类型的DBMS(数据库管理系统)存储管理器: (1)DBMS直接与底层的面向磁盘的块模式设备驱动程序进行交互(通常称为原始模式访问); (2)DBMS使用标准的OS文 ...

  2. oldboy-作业01.登录多次进行账号锁定

    """可以支持多个用户登录 (提示,通过列表存多个账户信息)用户3次认证失败后,退出程序,再次启动程序尝试登录时,还是锁定状态(提示:需把用户锁定的状态存到文件里) &q ...

  3. firewall

    翻译 public (active) 公共(防火墙) target: default 目标: 默认 icmp-block-inversion: no ICMP块反演:NO interfaces: et ...

  4. leetcode 704. Binary Search 、35. Search Insert Position 、278. First Bad Version

    704. Binary Search 1.使用start+1 < end,这样保证最后剩两个数 2.mid = start + (end - start)/2,这样避免接近max-int导致的溢 ...

  5. 普通用户使用Docker

    1.查询是否有docker组 cat /etc/group 如果没有可以通过该命令添加(一般默认是有的) sudo groupadd docker 2.将当前用户添加到docker组 sudo use ...

  6. 在Java中,将ExecutorService转为守护程序

    问题描述 我正在Java 1.6中使用一个ExecutoreService,简单地开始 ExecutorService pool = Executors.newFixedThreadPool(THRE ...

  7. 工具篇-Java中一些utils

    下边是整理的一些Java开发的utils,顺便吐槽下新浪博客的编辑器排版跟我写的博客一样 烂,所以改用博客园 一.字符串 1. Java中String与其他类型之间的转换 String与日期对象 pu ...

  8. 环境部署(一):Linux下安装JDK

    自动化测试的主要目的是为了执行回归测试.当然,为了模拟真实的用户操作,一般都是在UAT或者生产环境进行回归测试. 为了尽量避免内网和外网解析对测试结果的影响,将自动化测试服务部署在外网的服务器是比较好 ...

  9. python:面向对象编程之Zope.interface安装使用

    持续学习python+django中... 一.接口简述 在我们所熟知的面向对象编程语言中,大多提供了接口(interface)的概念.接口在编程语言中指的是一个抽象类型,是抽象方法的集合:它的特点如 ...

  10. Java调用FFmpeg进行视频处理及Builder设计模式的应用

    1.FFmpeg是什么 FFmpeg(https://www.ffmpeg.org)是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.它用来干吗呢?视频采集.视频格式转化.视频 ...