前端vue项目浏览器变小屏时加横向滚动条

在Vue前端项目中，当页面内容超过视口宽度时，浏览器会自动显示水平滚动条来允许用户浏览未显示的部分。这是因为默认情况下，HTML元素的内容区域（content box）如果超出其容器的宽度，浏览器会为其添加滚动条。

为了在浏览器窗口缩小时添加横向滚动条，你可以通过CSS设置以下样式：

body, .your-container {
  overflow-x: auto;
}

/* 或者针对特定元素 */
.scrollable-element {
  overflow-x: scroll;
}

这里的`.your-container`需要替换为你希望添加滚动条的实际容器选择器，如`#app`, `.container-wrap`等。这样，当你浏览器窗口减小时，如果没有足够的空间展示所有内容，滚动条就会出现。

如果你想要在某些条件下才显示滚动条，可以使用媒体查询（Media Queries），比如：

@media (max-width: 768px) { /* 可调整为合适的屏幕尺寸 */
  .scrollable-element {
    overflow-x: auto;
  }
}

这会在窗口宽度小于或等于768像素时应用滚动条样式。