@media screen and (max-width: 768px) {

  body {
    background: #fff;
  }

  .container {
    width: 100%;
    /* 修改为100%以适配移动端 */
    margin: 0 auto;
    /* 增加左右内边距，使内容不至于过于挨边 */
  }

  /* 内容 */
  .main {
    width: 100%;
    padding: 20px 0;
  }

  .main .container {
    display: block;
    /* 修改为块级元素，以便移动端布局 */
  }

  .main .container .main-left {
    width: 100%;
    /* 修改为100%以适配移动端 */
  }

  .main .container .main-left header {
    background: #fff;
    padding: 15px;
    /* 缩小标题区域内边距 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .main .container .main-left header h1 {
    font-size: 22px;
    /* 缩小标题字号 */
    font-weight: 400;
    margin-bottom: 10px;
    /* 缩小标题底部间距 */
  }

  .main .container .main-left header .tag {
    margin-top: 10px;
    /* 缩小标签区域顶部间距 */
  }

  .main .container .main-left header .tag .item {
    display: inline-block;
    padding: 4px 8px;
    /* 缩小标签内边距 */
    font-size: 10px;
    /* 缩小标签字号 */
    border-radius: 2px;
  }

  .main .container .main-left header .user {
    padding: 10px 15px;
    /* 缩小用户信息区域内边距 */
    font-size: 12px;
    /* 缩小用户信息字号 */
    background-color: #f8f8f8;
    color: #999;
    display: flex;
    align-items: center;
    /* 垂直居中 */
    margin-top: 10px;
    /* 缩小用户信息区域顶部间距 */
  }

  .main .container .main-left header .user img {
    width: 30px;
    /* 缩小用户头像尺寸 */
    height: 30px;
  }

  .main .container .main-left header .user .name {
    color: #01aade;
    margin-left: 8px;
    /* 缩小用户名与头像间距 */
  }

  .main .container .main-left .main {
    margin-top: 15px;
    /* 缩小主要内容区域顶部间距 */
  }

  .main .container .main-left .main .box-item {
    padding: 0 15px 15px;
    /* 缩小内容盒子内边距 */
  }

  .main .container .main-left .main .box-item .user {
    font-size: 12px;
    /* 缩小用户信息字号 */
    display: flex;
    align-items: center;
  }

  .main .container .main-left .main .box-item .user img {
    width: 30px;
    /* 缩小用户头像尺寸 */
    height: 30px;
  }

  .main .container .main-left .main .box-item .user .right {
    display: flex;
    flex-direction: column;
    margin-left: 8px;
    /* 缩小用户信息右侧间距 */
  }

  .main .container .main-left .main .box-item .user .right .name {
    color: #01aade;
  }

  .main .container .main-left .main .box-item .user .right .time {
    color: #999;
  }

  .main .container .main-left .main .box-item p {
    color: #333;
    line-height: 20px;
    /* 调整文本行高 */
    margin-top: 8px;
    /* 缩小文本顶部间距 */
  }

  .main .container .main-left .main .box-item .tool {
    color: #999;
    margin-top: 10px;
    /* 缩小工具栏顶部间距 */
    font-size: 12px;
    /* 缩小工具栏字号 */
  }

  .main .container .main-left .main .box-item .reply-box {
    background: #f3f3f5;
    padding: 15px;
    /* 缩小回复框内边距 */
    margin-top: 15px;
    /* 缩小回复框顶部间距 */
  }

  .main .container .main-left .main .box-item .reply-box .reply-item>img {
    max-width: 100%;
  }

  .main .container .main-left .main .box-item>img {
    margin-top: 10px;
    /* 缩小图片顶部间距 */
    max-width: 100%;
  }

  .main .container .main-right {
    display: none;
    /* 移动端隐藏右侧栏 */
  }

  .main .container .card {
    text-align: center;
    width: 100%;
    padding: 10px;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .main .container .card h1 {
    font-size: 16px;
    /* 缩小卡片标题字号 */
    margin-bottom: 5px;
    /* 缩小卡片标题底部间距 */
  }

  .main .container .card img {
    width: 100%;
  }

  /* 底部 */
  footer {
    background-color: #3c3c3c;
    color: #c2c2c2;
    padding: 20px 0;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
  }

  footer a {
    color: #c2c2c2;
    text-decoration: none;
  }

  footer a:hover {
    text-decoration: underline;
  }

}