vue项目怎么做响应式布局

对于vue项目的响应式布局，可以使用CSS的媒体查询来实现。在vue组件中，可以使用style标签来编写CSS样式，然后使用@media查询来设置不同的屏幕尺寸下的样式。例如：

<style>
/* 默认样式 */
.container {
width: 100%;
max-width: 120px;
margin: auto;
}

/* 在小屏幕下的样式 */
@media (max-width: 768px) {
.container {
max-width: 100%;
padding: 20px;
}
}
</style>

在上面的例子中，我们设置了一个默认的样式，容器的最大宽度为120px，并且居中对齐。然后，我们使用@media查询来设置在小屏幕下的样式，容器的最大宽度为100%，并且添加了左右20px的内边距。

这样，当用户在不同的设备上访问我们的vue项目时，就可以根据屏幕尺寸自动适应不同的布局。