vue.js 是一种用于构建用户界面的现代 javascript 框架。它的灵活性和可扩展性，使其成为最受欢迎的前端开发框架之一。在 vue.js 中使用 rem 实现响应式布局非常简单，下面将介绍如何使用 rem 在 vue.js 中进行响应式布局。
- 什么是 Rem？
Rem 是一个相对单位，它是根据视口宽度来计算的，它的意思是「根据根元素的字体大小进行等比缩放」。例如，如果根元素的字体大小为 10px，则 1rem 将等于 10px。如果根元素的字体大小为 20px，则 1rem 将等于 20px。
使用 Rem 进行响应式设计的好处是，当用户调整浏览器窗口大小时，页面中的元素将随之缩放，从而保持相对大小关系，使其在不同设备上呈现可读性和易用性。
- 设置 Rem
在 Vue.js 中，我们可以使用如下代码设置 rem：
// 设置基准值
const baseSize = 32 // 设计图尺寸（1920px）/ 60
// 设置 rem 函数
function setRem () {
const scale = document.documentElement.clientWidth / 1920
document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 1)}px`
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', () => {
setRem()
})在上述代码中，我们首先定义了一个基准值 baseSize，通常情况下，我们会将基准值设置为设计稿的尺寸（这里假设设计稿尺寸为 1920px）。接下来定义了一个 setRem 函数，它用于根据当前窗口宽度计算字体大小和 rem 值。最后在初始化时，调用 setRem 函数来设置当前的 rem 值，并使用 window.addEventListener 监听窗口大小变化事件，以便在窗口大小变化时重新设置 rem 值。
立即学习“前端免费学习笔记（深入）”；
系统特点：技术领先：系统基于被广泛使用的Windows平台开发，集百家之所长，技术领先、功能完备； 快速建店：只需简单设置，3分钟即可以建立一个功能完备的网上商城； 操作简便：软件操作界面由专业设计人员设计，采用人性化的布局，界面规范，操作简捷； 安装方便：只需传到您的虚拟空间即可； HTML编辑器：内置优秀的HTML在线编辑器； 可扩展性：软件构架灵活，考虑未来功能扩充之需要，具有较强的可扩展性
- 在 Vue 中使用 Rem
有了设置好的 rem，接下来就可以在 Vue.js 中使用它进行响应式布局了。在组件中使用 rem 的方法如下：
在上述代码中，我们首先设置了一个 .container 样式，该样式具有固定宽度和居中对齐的效果。在 .box 样式中，我们使用了 margin 来使元素与 .container 有一定距离。将样式中的值设置为 rem 值，使其能够根据窗口大小进行响应式缩放。
- 结论
在 Vue.js 中使用 Rem 进行响应式布局是一种常用的方法，它能够帮助我们更好地适应不同设备和窗口大小。使用 Rem，可以根据视口大小计算出字体大小和 rem 值，并在样式中进行应用。在 Vue.js 中设置 Rem 非常容易，只需要编写一些 JavaScript 代码即可。
当然，还有其他实现响应式布局的方法，例如使用 Bootstrap 等 CSS 框架。相比较而言，使用 Rem 的方法更加灵活，可以支持更多自定义需求。
