响应式布局实战

一个完整的响应式页面示例。

Mobile First 策略

/* 手机样式（基础） */
.container {
  padding: 10px;
}
.sidebar {
  display: none; /* 手机隐藏侧边栏 */
}

/* 平板 */
@media (min-width: 768px) {
  .container {
    display: flex;
  }
  .sidebar {
    display: block;
    width: 25%;
  }
  .main {
    width: 75%;
  }
}

/* 桌面 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

响应式图片

img {
  max-width: 100%;
  height: auto;
}

响应式表格

小屏幕时表格可横向滚动：

.table-wrapper {
  overflow-x: auto;
}

相关文章：登录表单 | 完整项目实战