适配准备

安装 (amfe-flexible) 和（postcss-px2rem）

1, 安装依赖并在main.js中引入该依赖

npm i amfe-flexible

import “amfe-flexible”

2,安装第二依赖

npm i postcss-px2rem

并在paackage.json中配置此依赖

  "postcss": {

    "plugins": {

      "autoprefixer": {},

      "postcss-px2rem": {

        "remUnit": 192 //设计稿的除以10得到适配范围

      }

    }

  }

然后重启项目，会帮我们自动转换的px为rem来进行适配

Vue-cli4.xPC端项目Rem适配的更多相关文章

  1. Vue将px转化为rem适配移动端

    Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib ...

  2. 移动端使用rem适配及相关问题

    移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...

  3. vue移动端项目vw适配运行项目时出现"advanced"报错解决办法。

    Module build failed: Error: Cannot load preset "advanced". Please check your configuration ...

  4. vue新建移动端项目模板

    vue移动端模板 tip: 1.ui我们使用的是vux,庆幸的是,解决了打包过大的问题, 2.这里使用的是rem布局,移动端还是要使用ipad和不同尺寸的手机 3.版本:webpack:3.6.0   ...

  5. 前端移动端的rem适配计算原理

    rem是什么? rem(font size of the root element)是指相对于根元素的字体大小的单位.简单的说它就是一个相对单位.看到rem大家一定会想起em单位,em(font si ...

  6. 移动端的rem适配

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. vue开发移动端项目 过渡动画问题

     App.vue:  <div id="app"> <div class="content"> <transition :name ...

  8. 从零开始搭建vue移动端项目到上线的步骤

    初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录 ...

  9. 自动改变html font-size，实现移动端rem适配

    移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...

随机推荐

  1. html2canvas实现截取指定区域或iframe的区域

    官网文档: http://html2canvas.hertzen.com/ 使用的是 jquery 3.2.1   html2canvas 1.0.0-rc.7 截取根据id的指定区域: var ca ...

  2. Spring Cloud Gateway 没有链路信息，我 TM 人傻了（中）

    本系列是 我TM人傻了 系列第五期[捂脸],往期精彩回顾: 升级到Spring 5.3.x之后,GC次数急剧增加,我TM人傻了 这个大表走索引字段查询的 SQL 怎么就成全扫描了,我TM人傻了 获取异 ...

  3. 关于web桌面应用的集成解决方案

    背景 毫无疑问,面对一个新的项目需求,我们首先想到的就是web. 确实,web太方便了,基于浏览器对OS的适配,我们可以很快速的实现某个需求的页面UI,而无需考虑OS的兼容差异. 再经过jq.boot ...

  4. jmeter5.2版本 配置元件之参数化详解

    1.方式1 :CSV Data Set Config : 打开方式:配置元件---csv data set config 作用:用于读取txt.csv文件数据,注意:默认txt.csv文件的第一行内容 ...

  5. 『Python』matplotlib常用函数

    1. 绘制图表组成元素的主要函数 1.1 plot()--展现量的变化趋势 import numpy as np import matplotlib.pyplot as plt import matp ...

  6. sunny 内网穿透使用。

    启动方法:

  7. 03 依赖注入--01控制反转、IoC模式

    控制反转Inversion of Control DI和IoC几乎都是成对出现的,我们在理解依赖注入之前首先要弄明白什么是IoC,也就是控制反转,体现的就是控制权的转移,即控制权原来在A中,现在需要B ...

  8. 深入浅出WPF-11.Template（模板）02

    模板 DataTemplate和ControlTemplate的关系 通过上面的内容,控件只是一个数据和行为的载体,是一个抽象的概念,至于它长什么样子,或者它的数据是怎么展示的,都是由模板生成的.决定 ...

  9. php flush() 页面缓冲及时输出 每隔一秒输出页面输出

    <?php //方案一 ob_end_clean(); echo str_pad('', 1024); // 设置足够大,大过php.ini的output_buffering设置值 for ($ ...

  10. 你需要知道的MySQL&InnoDB锁都在这里

    目录 一.前言 二.锁的类型 2.1 全局锁 2.2 表级锁 2.2.1 表锁 2.2.2 元数据锁(Meta Data Locks) 2.2.3 自增列锁(AUTO-INC Locks) 2.2.4 ...