时间戳

首页 > 解决方案 > 使网页宽度响应每个屏幕设备

html - 使网页宽度响应每个屏幕设备

问题描述

我的网络应用程序上有一个页面在小屏幕设备上重叠。如何使用媒体查询使其响应？

<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>

标签： htmlcssionic-framework

解决方案

您必须使用ion-grid - https://ionicframework.com/docs/api/grid 网格是一个强大的移动优先 flexbox 系统，用于构建自定义布局。

它由三个单元组成——网格、行和列。列将扩展以填充行，并将调整大小以适应其他列。它基于 12 列布局，根据屏幕大小具有不同的断点。可以使用 CSS 自定义列数。

推荐阅读