适配准备

安装 (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. fillder 抓包工具详解

    一.安装详解 直接点击.exe可执行文件,一直下一步直到安装完成即可.打开主要为5个部分: 二.安装jmeter插件详解 三.工具详解 3.1:工具条:,可以给指定的请求添加备注信息,在导出后可以查看 ...

  2. python学习笔记(十六)-Python多线程多进程

    一.线程&进程 对于操作系统来说,一个任务就是一个进程(Process),比如打开一个浏览器就是启动一个浏览器进程,打开一个记事本就启动了一个记事本进程,打开两个记事本就启动了两个记事本进程, ...

  3. 【HTML】实战阿里云src页面css模仿基础学习

    实战结果页面gif图片 阿里云src首页模仿完整代码(500行左右) <!DOCTYPE html> <html> <head> <meta charset= ...

  4. CF1322B-Present【双指针】

    正题 题目链接:https://www.luogu.com.cn/problem/CF1322B 题目大意 给出\(n\)个数字\(a_i\)求 \[\bigoplus _{i=1}^n\bigopl ...

  5. P3649-[APIO2014]回文串【PAM】

    正题 题目链接:https://www.luogu.com.cn/problem/P3649 题目大意 一个字符串,求最大的回文串长度×出现次数 解题思路 构建出\(\text{PAM}\)然后统计一 ...

  6. WPF进阶技巧和实战04-资源

    资源集合 每个元素都有Resources属性,该属性存储了一个资源字典集合(它是ResourceDictionary类的实例).资源集合可以包含任意类型的对象,并根据字符串编写索引. 每个元素既可以访 ...

  7. 深入浅出WPF-08.Event（ 事件）02

    路由事件 为了方便程序中对象之间的通信常常需要我们定义一些路由事件.使用路由事件比直接事件方便得多. 创建自定义路由事件的步骤: 1)声明并注册路由 2)为路由事件添加CLR事件包装 3)创建可以激发 ...

  8. java 请求第三方接口 GET\POST 实现方法

    (1)GET方法 /** * 根据高德地图api获取位置信息 * @return * */ public static String getMapAddInfo(String httpurl) { H ...

  9. Linux系统自我学习的一些笔记1

    远程连接: 1.查看IP地址  ip addr 2.远程登陆linux系统 ssh  主机名@IP地址 文件操作: 新建文件touch 例如:touch test.txt (创建单个文件) 例如:to ...

  10. Chrome安装Postman以及启动的方式

    Postman一个web开发人员必不可少的接口调试神器 Chrome安装Postman的方法网上很多,就不一一列举了我个人使用的方式目前常用的两种方式 方式一:下载插件安装包使用开发者模式安装 推荐一 ...