如何让网页宽度适配所有屏幕设备 用media queries解决小屏重叠问题

问题根因 #

当前小屏内容重叠是因为<ion-toolbar>容器宽度不足，无法同时容纳标题和5个操作按钮，默认横向布局下元素互相挤压导致重叠。

适配代码实现 #

在对应页面的CSS/SCSS文件中添加以下媒体查询规则即可：

/* 大屏默认样式保持原有逻辑 */
ion-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 适配宽度小于768px的平板、手机设备 */
@media only screen and (max-width: 768px) {
  ion-toolbar {
    /* 改为垂直布局避免横向挤压 */
    flex-direction: column;
    padding: 8px 0;
    height: auto !important; /* 覆盖Ionic默认固定高度限制 */
  }

  ion-buttons {
    /* 按钮组支持换行，避免溢出 */
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 8px 0 0 0;
    width: 100%;
  }

  ion-button {
    /* 用Ionic原生CSS变量缩小按钮边距，适配小屏 */
    --padding-start: 8px;
    --padding-end: 8px;
    font-size: 14px;
  }
}

/* 额外适配360px以下的超小屏旧手机 */
@media only screen and (max-width: 360px) {
  ion-title {
    font-size: 18px;
  }

  ion-button {
    font-size: 12px;
  }
}

可选优化方案 #

如果小屏下按钮太多仍然拥挤，可以配合Ionic自带的菜单组件做进阶适配：

• 小屏隐藏原<ion-buttons>，替换为单个汉堡菜单按钮
• 点击按钮弹出侧边栏展示所有导航选项，进一步节省顶部空间

原页面结构参考 #

你提供的页面原始代码如下：

<ion-header>
  <ion-toolbar>
    <ion-title>Admin Console</ion-title>
    <ion-buttons>
        <ion-button (click)="home()">Home</ion-button>
        <ion-button routerLink="./users">Users</ion-button>
        <ion-button routerLink="./orders" routerLinkActive>Orders</ion-button>
        <ion-button routerLink="./suppliers">Suppliers</ion-button>
        <ion-button routerLink="./updates">Database Updates</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <router-outlet></router-outlet>
</ion-content>

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