高度的設計技巧 - daniel-qa/Vue GitHub Wiki

高度的設計技巧

推荐写法选择

场景 推荐方案 理由
父组件高度固定为 75vh,子组件只需简单适配 方案 1:直接继承 height: 100% 简单有效,无需额外通信。适用于无复杂逻辑的场景。

上層,要挑選一個適當的分頁切換邏輯層,把最外層的高度控制,放在這一層,集中管理,

在此層上面的層級不要設限制,細節調整放在 End DOM 設定。


寬度設定

min-width: 1280px;
max-width: 100%;

这段 CSS 设置了一个元素的最小宽度为 1280px,并将最大宽度限制为 100%。以下是它的含义:

min-width: 1280px;

元素的宽度不能小于 1280px,即使父容器或视口较小,元素仍会保持至少 1280px 宽。

max-width: 100%;

元素的宽度不能超过其父容器的宽度(即 100% 的父容器宽度)。如果视口宽度小于 1280px,会触发水平滚动条。

结合起来,这种设置通常用于响应式设计中的布局限制,确保某个区域在大屏幕上至少有 1280px 的宽度,但不会超出父容器的宽度。

  • 注意事项

如果视口宽度小于 1280px,可能会导致溢出。可以配合媒体查询优化:

@media (max-width: 1280px) {
  .your-class {
    min-width: auto; /* 根据需要调整 */
  }
}
⚠️ **GitHub.com Fallback** ⚠️