适配准备

安装 (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. switchery插件:多个按钮,用jquery进行切换

    单个按钮可以参照这个链接https://blog.csdn.net/u012233776/article/details/53305846 多个按钮时, html中其中想操作这个按钮开启与关闭 < ...

  2. postman 插件安装

    本文只是基于 Chrome 浏览器的扩展插件来进行的安装,并非单独应用程序. 首先,你要台电脑,其次,安装有 Chrome 浏览器,那你接着往下看吧. 1. 官网安装(别看) 打开官网,https:/ ...

  3. webpack工具学习 构建简单vue项目（不依赖vue-cli） webpack4.0

    目的用webpack构建简单前端项目 1.npm init   (npm init -y)  形成package.json 2.npm install --save-dev webpack  形成 n ...

  4. Python3入门系列之-----json与字典转换

    json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写 JSON 函数 使用 JSON 函数需要导入 json 库:import js ...

  5. MR 01 - MapReduce 计算框架入门

    目录 1 - 什么是 MapReduce 2 - MapReduce 的设计思想 2.1 如何海量数据:分而治之 2.2 方便开发使用:隐藏系统层细节 2.3 构建抽象模型:Map 和 Reduce ...

  6. 从零开始学算法---二叉平衡树（AVL树）

    先来了解一些基本概念: 1)什么是二叉平衡树? 之前我们了解过二叉查找树,我们说通常来讲, 对于一棵有n个节点的二叉查找树,查询一个节点的时间复杂度为log以2为底的N的对数. 通常来讲是这样的, 但 ...

  7. Pytorch学习2020春-1-线性回归

    线性回归 主要内容包括: 线性回归的基本要素 线性回归模型从零开始的实现 线性回归模型使用pytorch的简洁实现 线性回归的基本要素 模型 为了简单起见,这里我们假设价格只取决于房屋状况的两个因素, ...

  8. [云计算]Windows Server 2012 R2 配置AD/DNS/DHCP服务

    目录 一.前期准备 1.1 安装Windows Server 2012 R2 1.2 关闭防火墙 1.3 改变计算机名 1.4 挂载并安装Tools 1.5 重启并配置网卡 1.6 添加角色和功能 1 ...

  9. 分布式系统ID

    Leaf--美团点评分布式ID生成系统 前言 在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识.如在美团点评的金融.支付.餐饮.酒店.猫眼电影等产品的系统中,数据日渐增长,对数据分库分表后需 ...

  10. keras框架下的深度学习（一）手写体识别

    这个系列文章主要记录使用keras框架来搭建深度学习模型的学习过程,其中有一些自己的想法和体会,主要学习的书籍是:Deep Learning with Python,使用的IDE是pycharm. 在 ...