跳到主要内容

布局✅

水平垂直居中​

答案
<style>
.container {
  align-content: center;
  height: 200px;
  background: gray;
  text-align: center;
}
</style>
<div class="container">
  <div>content</div>
</div>
Open on CodeSandboxOpen Sandbox

延伸阅读

实现三栏布局?​

答案
<style>
.container {
  display: flex;
  height: 100vh;
}
nav {
  flex: 0 0 200px;
  background: lightcoral;
}
article {
  flex: 1;
  min-width: 100px;
  background: lightblue;
}
aside {
  flex: 0 0 200px;
  background: lightgreen;
}
</style>
<div class="container">
  <nav></nav>
  <article></article>
  <aside></aside>
</div>
Open on CodeSandboxOpen Sandbox

实现圣杯布局​

答案
<style>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  header,
  footer {
    height: 40px;
    background: lightgray;
    min-width: 500px;
  }
  .main {
    display: flex;
    flex: 1;
    min-height: 0;
  }
  nav {
    width: 200px;
    background: lightcoral;
    flex-shrink: 0;
  }
  article {
    flex: 1;
    min-width: 100px;
    background: lightblue;
    min-height: 0;
  }
  aside {
    width: 200px;
    background: lightgreen;
    flex-shrink: 0;
  }
</style>
<div class="container">
  <header></header>
  <div class="main">
    <nav></nav>
    <article></article>
    <aside></aside>
  </div>
  <footer></footer>
</div>
Open on CodeSandboxOpen Sandbox

实现类似 Bootstrap 的栅格布局​

答案
<style>
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
  }
  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    margin-bottom: 16px;
  }
  .col-1 {
    grid-column: span 1;
  }
  .col-2 {
    grid-column: span 2;
  }
  .col-3 {
    grid-column: span 3;
  }
  .col-4 {
    grid-column: span 4;
  }
  .col-6 {
    grid-column: span 6;
  }
  .col-12 {
    grid-column: span 12;
  }
  .box {
    background: #e3e3e3;
    border-radius: 4px;
    padding: 24px;
    text-align: center;
    font-weight: bold;
  }
</style>
<h1>Grid 实现 Bootstrap 栅格系统</h1>
<div class="container">
  <div class="row">
    <div class="col-4 box">.col-4</div>
    <div class="col-4 box">.col-4</div>
    <div class="col-4 box">.col-4</div>
  </div>
  <div class="row">
    <div class="col-6 box">.col-6</div>
    <div class="col-6 box">.col-6</div>
  </div>
  <div class="row">
    <div class="col-12 box">.col-12</div>
  </div>
</div>
Open on CodeSandboxOpen Sandbox

实现砖块布局(Masonry Layout)​

答案
<style>
  .masonry {
    column-count: 3;
    column-gap: 16px;
  }
  .masonry-item {
    break-inside: avoid;
    margin-bottom: 16px;
    background: #f2f2f2;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
</style>
<div class="masonry">
  <div class="masonry-item">内容1<br />高度不一</div>
  <div class="masonry-item">内容2<br />更高一些<br />再多一行</div>
  <div class="masonry-item">内容3</div>
  <div class="masonry-item">内容4<br />高度不一</div>
  <div class="masonry-item">内容5<br />更高一些<br />再多一行</div>
  <div class="masonry-item">内容6</div>
</div>
Open on CodeSandboxOpen Sandbox

延伸阅读

如何实现响应式断点设计？​

答案

核心概念

响应式断点是指在不同屏幕尺寸下切换布局和样式的临界点。合理的断点设计能确保网站在各种设备上都有良好的显示效果。

常见断点规范

/* Bootstrap 5 断点 */
/* Extra small devices (portrait phones) */
/* 默认样式，无需媒体查询 */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { }

自定义断点系统

/* 定义CSS变量 */
:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;
}

/* 使用容器查询（现代方案） */
@container (min-width: 768px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

/* 传统媒体查询 */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

断点选择策略

  1. 基于内容的断点

    • 根据内容的自然断裂点设置
    • 测试实际内容在不同尺寸下的表现

  2. 基于设备的断点

    • 参考主流设备的屏幕尺寸
    • 考虑目标用户群体的设备使用情况

  3. 基于设计的断点

    • 配合设计稿的栅格系统
    • 保持视觉层次的一致性

实际应用示例

/* 响应式卡片布局 */
.card-container {
  display: grid;
  gap: 20px;
  padding: 20px;
  
  /* 自适应列数 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 响应式导航 */
.navigation {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .navigation {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* 响应式字体大小 */
.heading {
  font-size: clamp(1.5rem, 5vw, 3rem);
  line-height: 1.2;
}

/* 响应式间距 */
.section {
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 5vw, 2rem);
}

最佳实践

  • 优先考虑内容的自然断裂点
  • 使用相对单位（rem、em、%）
  • 测试真实设备而非仅依赖浏览器调试工具
  • 考虑横竖屏切换的影响
  • 使用现代CSS特性如clamp()、container queries

CSS 如何实现固定长宽比的元素​

答案
提示

注意 padding 采用 百分比单位时是相对于父元素宽度的。基于这个原理，在不设置高度的情况下就可以实现 任意比例的元素。然后通过内层元素绝对定位填充整个容器。

<style>
  .aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; 
    background: #e3e3e3;
    overflow: hidden;
  }
  .aspect-ratio-content {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
<div class="aspect-ratio-box">
  <div class="aspect-ratio-content">固定 16:9 比例内容</div>
</div>
Open on CodeSandboxOpen Sandbox

延伸阅读