vue-cli3 中使用rem布局

等级 737 0 0
标签: Javascript

1. 装包postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2. 在根目录src中新建utils目录下新建rem.js等比适配文件,内容如下

// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920
  // 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

3.在main.js中引入适配文件

import ‘./utils/rem’

4.到vue.config.js中配置插件

// 引入等比适配插件
const px2rem = require('postcss-px2rem')

// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize,需要和rem.js中相同
  remUnit: 16
})

// 使用等比适配插件
module.exports = {
  lintOnSave: true,
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}
收藏
评论区

相关推荐

JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
vue-cli3 中使用rem布局
1. 装包postcsspx2rem及px2remloader npm install postcsspx2rem px2remloader save 2. 在根目录src中新建utils目录下新建rem.js等比适配文件,内容如下 // rem等比适配配置文件 // 基准大小 const baseSize 16 // 设置 rem
基于Vue3+TypeScript+ Vue-Cli4.0构建手机端模板脚手架
vue3h5template基于 Vue3TypeScript VueCli4.0 vant ui sass rem 适配方案axios 封装 jssdk 配置 vconsole 移动端调试,构建手机端模板脚手架项目地址: 建议手机端查看 Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本
Cmder启动速度优化
为加快cmder启动,我们可以做一些简单优化,减少环境变量检测和批处理调用操作 ======================================= 优化前启动时间:1.69秒 优化后启动时间:0.53秒 1\. 将cmder下批处理中lib\_console输出禁用 -------------------------------     
JavaScript 学习笔记十二 函数式编程风格
//Util.js function abs(x){ return x>0?x:-x;} function add(a, b){ return a+b; } function sub(a, b){ return a-b; } function mul(a, b){ return a*b; } function
JavaScript 查找替换
@echo off rem 查询 searchd 服务是否存在 sc query |find /i "searchd" >nul 2>nul if not errorlevel 1 (goto exist) else goto notexist rem 存在 searchd 服务
JavaScript中Filter的使用
#### filter filter也是一个常用的操作,它用于把`Array`的某些元素过滤掉,然后返回剩下的元素。 和`map()`类似,`Array`的`filter()`也接收一个函数。和`map()`不同的是,`filter()`把传入的函数依次作用于每个元素,然后根据返回值是`true`还是`false`决定保留还是丢弃该元素。 例如,在一个
JavaScript中的endsWith
### 问题: _How can I check if a string ends with a particular character in JavaScript?_ **如何在JavaScript中检查字符串是否以特定字符结尾?** _Example: I have a string_ **示例:我有一个字符串** var str = "
JavaScript中的原型
![](https://oscimg.oschina.net/oscnet/up-81f7c25308eb8b2d818be41a687597406b9.JPEG) Photo by [Dlanor S](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Funsplash.com%2F%40
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Mars Remote API 轻松分布式执行 Python 函数
Mars 是一个并行和分布式 Python 框架,能轻松把单机大家耳熟能详的的 numpy、pandas、scikit-learn 等库,以及 Python 函数利用多核或者多机加速。这其中,并行和分布式 Python 函数主要利用 Mars Remote API。 启动 Mars 分布式环境可以参考: 1. 命令行方式在集群中部署。 2. Kube
Mongo数据库 客户端_启动.bat
**Mongo数据库\_服务端\_启动.bat** 内容如下: rem 启动mongoDB数据库--服务端 [@echo](http://my.oschina.net/echolee1987) off rem mongoDB的安装顶层目录 d: rem 设置显示文字颜色 color 0a rem 修改当前目录到bin下 cd D:/Mong
SVNServer常用HOOK
svn server 可通过hook的方式  来自定义SVN 行为控制,这里列几个常用的。 1.限制单个提交文件大小不超过100MB Pre-commit hook @echo off setlocal enabledelayedexpansion set REPOS=%1 set TXN=%2
SVNServer常用HOOK
svn server 可通过hook的方式  来自定义SVN 行为控制,这里列几个常用的。 1.限制单个提交文件大小不超过100MB Pre-commit hook @echo off setlocal enabledelayedexpansion set REPOS=%1 set TXN=%2
Tomcat8源码分析2
   有篇博客讲得很好: [http://blog.csdn.net/flyliuweisky547/article/details/22753383](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fblog.csdn.net%2Fflyliuweisky547%2Farticle%2Fde