vue如何使用rem适配
作者：灰太狼的情与殇 发布时间：2024-04-30 08:44:49
标签：vue,rem,适配
1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用vue开发移动端的过程中,我们会因为兼容性而头疼,下面我来分享分享下面vue使用rem自适配,希望对你有所帮助。
4.废话不多说,直接上操作:
//安装 postcss-pxtorem
npm i postcss-pxtorem -S
5.在src目录新建rem文件夹,下面新建rem.js,添加如下代码:
//基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
const salepro = document.documentElement.clientWidth / 750
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改.
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
6.在项目根目录新建 .postcssrc.js,添加代码如下:
module.exports = {
"plugins": {
"postcss-pxtorem": {
"rootValue": 37.5,
"propList": ["*"]
}
}
}
注意:我在配置中,比例是1:1,也就是设计图宽是750px,你在css中直接写width:750px;就可以啦,不用进行换算,是不是很棒。
7.在main.js中引入
import '@/rem/rem.js'
8.在vue模板中使用,css中添加如下代码:
<style lang="scss" scoped>
.about {
width: 750px;
height: 100vh;
box-sizing: border-box;
background-color: blue !important;
.kk {
width: 350px;
height: 350px;
background-color: red;
}
}
</style>
9.效果图如下:
10.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。
来源：https://segmentfault.com/a/1190000039182158
0
投稿猜你喜欢
- 本文实例讲述了Python 闭包，函数分隔作用域，nonlocal声明非局部变量操作。分享给大家供大家参考，具体如下：实例对象也可以实现闭包
1.消息丢失1.生产者发送失败所有消息队列都可能发生的问题生产者发送消息后，队列未成功接收（网络原因或其他）而生产者不知情，消息丢失生产者发- 一、xlsxwriter 基本用法，创建 xlsx 文件并添加数据官方文档：http://xlsxwriter.readthedocs.or
- linux下mysql默认是要区分表名大小写的。mysql是否区分大小写设置是由参数lower_case_table_names决定的，其中
- while循环是PHP中最简单的循环，其基本格式为：while (expr){ statement } 或者while (ex
- 在Windows环境下，经常遇到系统Over的情况，如果你在新装了系统和SQL Server 2005后，需要把SQL Server2000
- 一、分析网页网站的页面是 JavaScript 渲染而成的，我们所看到的内容都是网页加载后又执行了JavaScript代码之后才呈现出来的，
- //重新封装document对象 var Console={ Write:function(msg){alert(msg);} }; //P
- 进程池代码演示方式一from multiprocessing import Pooldef deal_task(n): n -= 1 ret
- 前言今天教大家用wrodcloud模块来生成词云，我读取了一篇小说并生成了词云，先看一下效果图：效果图一：效果图二：根据效果图分析的还是比较
- 前言：本文的主要内容是介绍Python中的变量命名规则和简单数据类型的应用，简单的数据类型包括字符串和数字等，文中还附有代码以及相应的运行结
- 免责声明：本教程所有资源均来源于网络；仅用于学习交流，请勿用于任何商业行为；如需要，请使用正版授权；侵权联删。此篇教程通过无限重置试用期持续
- 在批评Python的讨论中，常常说起Python多线程是多么的难用。还有人对 global interpreter lock(也被亲切的称为
- 本文实例讲述了Python素数检测的方法。分享给大家供大家参考。具体如下：因子检测：检测因子，时间复杂度O(n^(1/2))def is_p
- 导语hello everyone! I'm kimiko!Miss me???嘿！中秋结束了，开始正式营业给大家继续送福
- ● 脚本用途遍历文件夹下的文件，消除文件名前的特征字符串。● 脚本实现import os,sysimport refrom string i
- 本章节将一些Python3基础语法整理成手册，方便各位在日常使用和学习是查阅，包含了编码、标识符、保留字、注释、缩进、字符串等常用内容。编码
- 在上一篇文章中讲解了什么是反射，以及利用反射可以获取程序集里面的哪些内容。在平时的项目中，可能会遇到项目需要使用多种数据库，这篇文章中将会讲
- 有时候在使用 Python 的时候，想要对一个数字或者字符串进行补零操作，即把「1」变为一个八位数的「00000001」，这个时候可以使用一
- 通常我们的网站里面会加载一些js代码，统计啊，google广告啊，百度同盟啊，阿里妈妈广告代码啊，一堆，最后弄得页面加载速度很慢，很慢。解决
