高度的設計技巧 - 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; /* 根据需要调整 */
}
}