适配准备

安装 (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. 在PHP中使用SPL库中的对象方法进行XML与数组的转换

    虽说现在很多的服务提供商都会提供 JSON 接口供我们使用,但是,还是有不少的服务依然必须使用 XML 作为接口格式,这就需要我们来对 XML 格式的数据进行解析转换.而 PHP 中并没有像 json ...

  2. 超详细的VMware安装ubuntu教程

    确定,然后重启.

  3. salesforce零基础学习（一百零八）MFA

    本篇参考:https://security.salesforce.com/mfa https://sfdc.co/bvtuQT  (MFA官方研讨会的文档) https://sfdc.co/iwiQK ...

  4. 无法解析的外部符号"void_cdecl caffe::caffe_gpu_dot<double>(int,double........)"

    将源码中的.cu文件添加到项目中即可,即使创建的就是NVIDIA的项目,也需要把这些个.cu文件添加进来

  5. TypeScript 枚举指南

    枚举是受 TypeScript 支持的数据类型.枚举允许您定义一组命名常量.使用它们可以更轻松地记录意图或创建一组不同的案例.枚举大多数用于面向对象的编程语言(如 Java 和 C#)中,现在也可以 ...

  6. 数据应用的变与不变，ShardingSphere 正在影响未来数字体验的建设理念

    近年来关于底层数据库的开源产品越来越多,它们也受到了许多资本的青睐. 伴随着移动互联网催生的数字化场景爆发,云计算.大数据等技术逐渐有了更加广阔的应用场景.在云计算和大数据经过十年的追赶式发展后,不只 ...

  7. hdu4479 （数学题）（算术基本定理）

    题目大意 给定一个三元组\((x,y,z)\)的\(gcd\)和\(lcm\),求可能的三元组的数量是多少,其中三元组是的具有顺序的 其中\(gcd\)和\(lcm\)都是32位整数范围之内 由算术基 ...

  8. FastAPI 学习之路（十八）表单与文件

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  9. MySQL：提高笔记-5

    MySQL:提高笔记-5 学完基础的语法后,进一步对 MySQL 进行学习,前几篇为: MySQL:提高笔记-1 MySQL:提高笔记-2 MySQL:提高笔记-3 MySQL:提高笔记-4 MySQ ...

  10. Java：泛型小记

    Java:泛型小记 对 Java 中的 泛型类,做一个微不足道的小小小小记 泛型实现 概述 开篇: List<String> l1 = new ArrayList<String> ...