留言板顶部距离

blog-frontend\kuailemao-blog\src\components\Layout\Main\index.vue

.content_container {
  height: 100%;
  width: 60%;
  max-width: 70rem;
  transition: padding 0.5s;
  //border: red 1px solid;
  @media screen and (max-width: 910px) {
    width: 100%;
    padding: 0.2rem;
  }
  padding: 1rem;
  background-color: var(--el-bg-color);
  border-radius: .5em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  @media screen and (max-width: 910px) {
    width: 100%;
    padding: 0.2rem;
    margin-top: 3.4vh; /* 移动端的 margin-top 值 */
  }
}

blog-frontend\kuailemao-blog\src\views\Amusement\Message\MessageList\index.vue

.bg{
  background: var(--el-bg-color);
  // 移动端距离屏幕两边距离
  margin: 0 auto; /* 水平居中对齐 */

  /* 使用媒体查询在移动端设置动态内边距 */
  @media screen and (max-width: 910px) {
    padding: 1vw; /* 移动端使用 vw 单位的动态内边距 */
  }
}