如何让glitch.com上搭建的网站实现响应式适配并消除多余滚动条

修复步骤 #

• 补全viewport meta标签，替换原有head内的viewport配置：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  

• 全局统一盒模型规则，避免padding、border撑宽元素触发溢出，在*选择器样式中新增属性：

  * {
    font-family: "Rubik";
    user-select: none;
    box-sizing: border-box; /* 新增这行 */
  }
  

• 调整页面主体为flex布局，避免侧边栏绝对定位带来的适配问题，新增main标签样式：

  main {
    display: flex;
    gap: 20px;
    padding: 20px 10px;
    box-sizing: border-box;
  }
  

• 修改侧边栏.dashboard样式，移除固定高度和绝对定位配置：

  .dashboard {
    width: 150px;
    flex-shrink: 0;
    height: fit-content;
    margin: 0;
    position: static;
  }
  

• 调整主体内容区article的适配规则，避免宽度异常：

  article:not(.dashboard) {
    flex: 1;
    min-width: 0;
    max-width: 700px;
    margin: 0 auto;
  }
  

• 新增媒体查询适配小屏设备，宽度小于768px时自动调整为上下布局：

  @media (max-width: 768px) {
    main {
      flex-direction: column;
    }
    .dashboard {
      width: 100%;
    }
    .home, .register {
      width: 100%;
      margin-bottom: 10px;
    }
    header img {
      margin-left: 20px;
    }
  }
  

• 可选：给body新增overflow-x: hidden;属性，彻底避免横向滚动条出现。

内容的提问来源于stack exchange，提问作者WripWrath