Vue项目自适应屏幕分辨率

Question

如下图所示 在大屏幕下图中 所有模块都是在一水平线上
换成笔记本来看就出现了错位

现在有两种方案:
1.自适应屏幕分辨率
2.出现横向滚动条

请问哪种比较好?

Answer 1

都可以
1、这个一般根据媒体查询设计 css 的样式，工作量稍微大一些。
2、直接 overflow: auto ，顺便修改下滚动条样式，简单粗暴。
3、像你贴出来的情况，一般就用第一种的方案即可(能配合flex布局和min-width的使用，并稍微修改下滚动条的样式效果会更好)，第一种方案就需要额外多的样式设计

Answer 2

@TensionMax

可以看到上图图中的红框标记的模块分行了,我想让他们在同一行,这个网页在大屏下是同一行的,在小屏幕下就分行了.想要达到的效果,如果当前屏幕不能支持全部显示,就在最最下面显示横向的滚动块.

后续

经过网友指点,修改方案如下:在父元素中加入样式

.box-card{

  display: flex;
  overflow-x: auto;
  flex: none;
}

所有元素不换行,如果如果元素的长度超出屏幕的宽度就出现横向滚动条