vue 2.0 及 vue 3.0 rem配置
vue 2.0 配置 rem
首先先安装postcss-px2rem (百度可以) https://www.jianshu.com/p/e6476bbc2131
npm install postcss-px2rem
找到文件 build / vue-loader.config.js 添加
const px2rem = require('postcss-px2rem')
postcss: function() {
return [px2rem({remUnit: 75})];
}

在index.html 文件中配置
<script>
document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth || document.body
.clientWidth) / 10 + 'px';
window.addEventListener("resize", () => {
document.getElementsByTagName('html')[0].style.fontSize = (document.documentElement.clientWidth || document
.body.clientWidth) / 10 + 'px';
});
</script>

vue 3.0 配置 rem (百度可以)
这位大佬 的 https://www.jianshu.com/p/94902796f2ad
vue 2.0 及 vue 3.0 rem配置的更多相关文章
- 简单vue项目脚手架(vue+webpack2.0+vuex+vue-router)
github地址 使用技术栈 webpack(^2.6.1) webpack-dev-server(^2.4.5) vue(^2.3.3) vuex(^2.3.1) vue-router(^2.5.3 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
- vue的生命周期(又称钩子函数)----以及vue1.0版本与vue2.0版本生命周期的不同
vue生命周期 1. vue1.0版本与vue2.0版本生命周期的不同 vue1.0版本生命周期图示 图1 vue1.0版本生命周期 vue1.0版本的生命周期: init 实例创建之前 creat ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
- Vue2.0总结———vue使用过程常见的一些问题
Vue目前的的开发模式主要有两种:1.直接页面级的开发,script直接引入Vue2.工程性开发,webpack+loader或者直接使用脚手架工具Vue-cli,里面的文件都配置好了 webpack ...
- 使用vue 3.0 初始化vue脚手架
vue-cli3.0安装 如果你事先已经全局安装了旧版本的vue-cli(1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g 安装 npm install -g ...
- webpack4.0 ---引用vue文件
一.引入Vue 1.安装依赖环境 npm i vue-loader -D;//解析转化.vue文件,npm i vue-style-loader -D npm i vue-template-compi ...
- Vue 2.0 与 Vue 3.0 响应式原理比较
Vue 2.0 的响应式是基于Object.defineProperty实现的 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 prop ...
- Vue2.0 搭建Vue脚手架(vue-cli)
介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 阅读之前需要了解的知 ...
- vue2.0搭建vue手脚架(vue-cli)
1.安装node.js 从node官网下载并安装node,安装步骤很简单,只要一路“next”就可以了.安装完成后,打开命令行工具输入命令node -v,如下图,如果出现对应版本号,就说明安装成功了. ...
随机推荐
- app 崩溃测试 (转:CSDN 我去热饭)
首先,崩溃有几种情况: 闪退 提示停止运行 无响应 ( 不同情况虽然没有严格意义上区分开引起原因,但是都有侧重.在之后的工作中,我会实时补充统计.) 1.接口返回值 [直接原因]:app无法解析接口返 ...
- 我是如何一步步编码完成万仓网ERP系统的(九)产品库设计 5.产品属性项
https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...
- springboot的pom.xml配置
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...
- 15-213 Bomb Lab
bomb lab是一道学习汇编语言的题,一共有六个阶段,全部解开即可完成 phase_1 0x0000000000400e32 <+>: callq 0x40149e <read_l ...
- 在微博微信场景下学习Redis数据结构
Redis安装 下载地址:http://redis.io/download 安装步骤: 1.yum install gcc 2.wget http://download.redis.io/releas ...
- 【开发笔记】- Grails框架定义一个不是数据库字段得属性
实体类 class Book{ String name String author // myfiled 我不想他在数据库中生成book表的字段 String myfield } 添加声明 class ...
- uni-app常用 HTML5+APP 设置
1.锁定屏幕方向 锁定屏幕方向后屏幕只能按锁定的屏幕方向显示,关闭当前页面后仍然有效. 可再次调用此方法修改屏幕锁定方向或调用 unlockOrientation() 方法恢复到应用的默认值. 锁定屏 ...
- 第一篇 Scrum 冲刺博客
一.各个成员在 Alpha 阶段认领的任务 姓名 Alpha 阶段认领的任务 林剑峰 用户信息页面:完成用户信息的上传 石竞贤 发布信息页面:完成用户图片上传云存储的功能,并且把发布信息上传到云数据库 ...
- 利用selenium和ffmpeg爬取m3u8 ts视频《进击的巨人》
需求 想看下动漫<进击的巨人>,发现到处被和谐,找不到资源,但是在一个视频网站找到了在线播放,https://www.55cc.cc/dongman/17890/player-2-1.ht ...
- 使用conda安装tensorflow-gpu
1.之前已经安装了anaconda,之前疏忽使用的pip安装的tensorflow,但pycharm还是使用的anaconda环境. 现在把pip的tensorflow删除了 pip uninstal ...