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 值。
立即学习“前端免费学习笔记（深入）”；
- 在 Vue 中使用 Rem
有了设置好的 rem，接下来就可以在 Vue.js 中使用它进行响应式布局了。在组件中使用 rem 的方法如下：
<template>
<div class="container">
<div class="box" :style="{ width: '32rem', height: '18rem' }"></div>
</div>
</template>
<script>
export default {
name: 'Demo',
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style scoped>
.container {
width: 60rem;
margin: 0 auto;
}
.box {
background-color: #F00;
margin: 2rem auto;
}
</style>在上述代码中，我们首先设置了一个 .container 样式，该样式具有固定宽度和居中对齐的效果。在 .box 样式中，我们使用了 margin 来使元素与 .container 有一定距离。将样式中的值设置为 rem 值，使其能够根据窗口大小进行响应式缩放。
- 结论
在 Vue.js 中使用 Rem 进行响应式布局是一种常用的方法，它能够帮助我们更好地适应不同设备和窗口大小。使用 Rem，可以根据视口大小计算出字体大小和 rem 值，并在样式中进行应用。在 Vue.js 中设置 Rem 非常容易，只需要编写一些 JavaScript 代码即可。
当然，还有其他实现响应式布局的方法，例如使用 Bootstrap 等 CSS 框架。相比较而言，使用 Rem 的方法更加灵活，可以支持更多自定义需求。
