教你一招解决vue页面自适应布局

针对vue页面自适应布局的问题，下面是我总结的完整攻略：

1. 使用flex布局

flex布局是一种强大的布局方式，它可以让我们轻松实现responsive design，也就是响应式页面设计。具体实现方法如下：

1.1 在父元素上设置display:flex

在父元素上使用display:flex，可以使该元素成为一个flex容器。如下所示：

.container {
  display: flex;
}

1.2 在子元素上设置flex属性

在flex容器内的子元素，可以使用flex属性来进行布局。

• flex: 1; 宽度自适应，占据剩余的空间。相当于设置了flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
• flex-grow: 1; 宽度自适应，占据剩余空间的比例，数值越大，占比越大；
• flex-shrink: 1; 宽度自适应，当空间不足时，子元素会按照该属性进行缩小。数值越大，缩小比例越大；
• flex-basis: 100px; 初始宽度为100px。

1.3 示例

假设这里有两个子元素，我们希望它们占据父元素的所有空间，并基于比例分配宽度，代码如下：

<div class="container">
  <div class="left">左侧</div>
  <div class="right">右侧</div>
</div>

.container {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 2;
}

这样，左侧元素占据三分之一的空间，右侧元素占据三分之二的空间。

2. 使用vw/vh

vw和vh是CSS3新增的长度单位，分别代表视口的宽度和高度。使用vw/vh可以让我们轻松实现responsive design，代码如下：

.container {
  width: 80vw;
  height: 50vh;
}

上述代码设置了一个宽度为视口宽度的80%，高度为视口高度的50%的容器。

示例

比如说，我们需要让页面上的元素自适应屏幕的大小，可以设置元素的宽高为vw和vh单位。

<div class="container">
  <div class="content">这是内容</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
}

.content {
  width: 50vw;
  height: 50vh;
  background-color: #ccc;
}

这样，容器和内容元素的宽高都将自适应屏幕大小，实现了页面自适应布局。