适配准备

安装 (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. 剑指offer计划20（ 搜索与回溯算法中等）---java

    1.1.题目1 剑指 Offer 07. 重建二叉树 1.2.解法 注释解法. 1.3.代码 class Solution { int[] preorder; HashMap<Integer, ...

  2. CORS跨域请求规则以及在Spring中的实现

    CORS: 通常情况下浏览器禁止AJAX从外部获取资源,因此就衍生了CORS这一标准体系,来实现跨域请求. CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origi ...

  3. js判断访客来源网址和关键字

    加入现在有A.B两个站,A为友站,B为我站. 希望判断使用从A站连来时,就把访问者拒绝在门外,只要用简单几行的javascript,就可抓到使用的来源,以及作出一些防范的措施. <script ...

  4. P1074 [NOIP2009 提高组] 靶形数独

    #include<bits/stdc++.h> using namespace std; const int N=10; int a[N][N],ans[N][N],vis[3][N][N ...

  5. python之jsonpath

    json 官方文档:http://docs.python.org/library/json.html JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它使 ...

  6. python学习笔记(六)-集合

    集合是一个无序不重复元素的集.基本功能包括关系测试和消除重复元素.集合对象还支持union(联合),intersection(交),difference(差)和sysmmetric differenc ...

  7. Lucene基础入门

    1. 数据的分类 结构化数据: 查询方法     数据库 非结构化数据: 查询方法  : (1)顺序扫描法   : 一行一行的看,从头看到尾 (2)全文检索 : 将一部分信息提取出来,重新组织将其变得 ...

  8. 防刷功能的实现（thinkphp5）

    $seconds = '3'; //时间段[秒] $refresh = '3';//最大次数 $cur_time = time(); if(Session::get('refresh_times')) ...

  9. 系统设计实践(03)- Instagram社交服务

    前言 系统设计实践篇的文章将会根据<系统设计面试的万金油>为前置模板,讲解数十个常见系统的设计思路. 前置阅读: <系统设计面试的万金油> 系统设计实践(01) - 短链服务 ...

  10. 华为云计算IE面试笔记-eBackup有哪几种备份组网方式，各备份组网方式主要的应用场景及备份流程？

    应用场景: LAN-Base一般用于备份数据量小,且对备份窗口没有特殊要求的场景,此类场景下备份服务器和备份代理一般是虚拟机部署. LAN-Free一般用于备份数据量较大,且对备份窗口要求比较严格的场 ...