随着移动设备的普及，网站的访问终端已经从 PC 端逐渐转向移动端。为了提升用户体验，我们需要为不同的设备提供不同的布局方案。Vue.js 作为一款流行的前端框架，提供了多种实现自适应布局的方法，本文将详细介绍其中的一些方法。
1. 媒体查询
媒体查询是 CSS3 中的一个特性，它允许根据设备的屏幕大小、分辨率等条件来应用不同的样式。我们可以利用 Vue.js 的计算属性和样式绑定来实现这一功能。
首先，我们需要在组件中定义一个计算属性，用于返回当前设备的屏幕宽度：
computed: {
screenWidth () {
return document.body.clientWidth
}
}然后，我们可以利用样式绑定来根据屏幕宽度应用不同的样式：
<div :class="{ 'pc': screenWidth >= 768, 'mobile': screenWidth < 768 }"></div>在上面的代码中，我们根据屏幕宽度是否大于等于 768px 来决定是否应用 'pc' 样式类，否则应用 'mobile' 样式类。
2. rem 布局
rem 是相对于根元素（即 html 元素）的字体大小单位。我们可以利用 rem 布局来实现自适应布局，同时兼顾 PC 端和移动端的显示效果。
首先，我们需要在 html 元素中设置一个基准字体大小，例如：
html {
font-size: 16px;
}然后，我们可以利用 JavaScript 动态计算根元素的字体大小，使其随着屏幕宽度的变化而变化：
function setRem () {
let width = document.documentElement.clientWidth || document.body.clientWidth
let rem = width / 10
document.documentElement.style.fontSize = rem + 'px'
}
setRem()
window.addEventListener('resize', setRem)在上面的代码中，我们将屏幕宽度除以 10，作为根元素的字体大小。同时，我们在窗口大小变化时，重新计算根元素的字体大小，以实现自适应布局。
最后，我们可以利用 rem 布局来定义各种元素的尺寸和间距：
.box {
width: 5rem;
height: 3rem;
margin-top: 1rem;
}在上面的代码中，我们将元素的宽度、高度和上边距都设置为 rem 单位，以实现自适应布局。
3. flex 布局
flex 布局是 CSS3 中的一个特性，它可以方便地实现自适应布局。我们可以利用 Vue.js 的样式绑定和计算属性来实现 flex 布局。
首先，我们需要在组件中定义一个计算属性，用于返回当前设备的屏幕宽度：
computed: {
isMobile () {
return document.body.clientWidth < 768
}
}然后，我们可以利用样式绑定来根据设备类型应用不同的布局样式：
<div :style="{ display: isMobile ? 'flex' : 'block', flexDirection: isMobile ? 'column' : 'row' }"></div>在上面的代码中，我们根据设备类型来决定是否应用 flex 布局，以及 flex 容器的方向。
示例代码
下面是一个完整的示例代码，演示如何利用 Vue.js 实现自适应布局：
// www.javascriptcn.com code example
<template>
<div :style="{ display: isMobile ? 'flex' : 'block', flexDirection: isMobile ? 'column' : 'row' }">
<div :style="{ width: isMobile ? '100%' : '50%', height: '3rem', margin: isMobile ? '1rem 0' : '0 1rem' }"></div>
<div :style="{ width: isMobile ? '100%' : '50%', height: '3rem', margin: isMobile ? '1rem 0' : '0 1rem' }"></div>
</div>
</template>
<script>
export default {
computed: {
isMobile () {
return document.body.clientWidth < 768
}
}
}
</script>
<style>
html {
font-size: 16px;
}
.box {
width: 5rem;
height: 3rem;
margin-top: 1rem;
}
</style>
<script>
function setRem () {
let width = document.documentElement.clientWidth || document.body.clientWidth
let rem = width / 10
document.documentElement.style.fontSize = rem + 'px'
}
setRem()
window.addEventListener('resize', setRem)
</script>在上面的代码中，我们利用 flex 布局和 rem 布局，实现了一个自适应的布局方案。同时，我们利用媒体查询，根据屏幕宽度应用不同的样式。这些方法都可以在 Vue.js 中轻松实现，为我们提供了更多的选择和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2c7d9a941bf713456e25a