ipad 上的按钮两行 - CSS

简介

本文介绍了如何使用 CSS 在 iPad 上创建两行按钮布局。通过使用灵活的 CSS 样式和媒体查询，我们可以实现在较小的视口上显示两行按钮，以适应 iPad 等设备的屏幕。

使用 flexbox 布局

要在 iPad 上创建两行按钮布局，我们可以使用 flexbox 布局。Flexbox 是一种强大的 CSS 布局模块，可以在不同尺寸的屏幕上灵活地显示和排列元素。

1. 首先，我们需要创建一个包含按钮的容器元素。在 HTML 文件中，使用 <div> 元素来创建一个容器。

   <div class="button-container">
     <!-- 按钮内容 -->
   </div>
   

2. 在 CSS 文件中，我们将为按钮容器应用 flexbox 布局。

   .button-container {
     display: flex;
     flex-wrap: wrap;
   }
   

   display: flex 属性将容器元素设置为 flex 容器，使其内部元素按照一行显示。flex-wrap: wrap 属性指定当容器宽度不足以容纳所有按钮时，换行显示按钮。

3. 接下来，我们需要为按钮元素创建 CSS 类。这些类将定义按钮的样式和布局。

   .button {
     flex-basis: calc(50% - 20px);
     margin: 10px;
   }
   

   flex-basis 属性指定按钮元素在容器中的初始大小，设置为 calc(50% - 20px) 可使两个按钮平均分配容器的宽度，并在按钮之间添加 20px 的间距。margin 属性用于设置按钮之间的外边距，以增加它们之间的空间。

4. 最后，将按钮元素添加到容器中，并分配相应的类。

   <div class="button-container">
     <button class="button">按钮1</button>
     <button class="button">按钮2</button>
     <button class="button">按钮3</button>
     <button class="button">按钮4</button>
   </div>
   

现在，当显示屏宽度变小时，按钮将自动换行显示，从而实现在 iPad 上显示两行按钮布局。

使用媒体查询

除了使用 flexbox 布局之外，我们还可以使用媒体查询来根据屏幕尺寸应用不同的样式。

1. 在 CSS 文件中，添加以下媒体查询。

   @media (max-width: 768px) {
     .button {
       flex-basis: calc(100% - 20px);
     }
   }
   

   这个媒体查询将在屏幕宽度小于等于 768px 时生效。在这种情况下，按钮将占据容器的整个宽度，并保持与周围元素之间的 20px 间距。

这样，当用户在 iPad 上旋转屏幕或调整窗口大小时，我们的按钮布局将自动适应不同的屏幕尺寸。

结论

通过使用 flexbox 布局和媒体查询，我们可以轻松地在 iPad 上创建两行按钮布局。这种灵活的布局方式可以适应不同尺寸的屏幕，并提供更好的用户体验。

注：本文的代码片段均以 markdown 格式标明，但由于 markdown 不支持实时演示，建议将代码复制到实际的 HTML 和 CSS 文件中以查看效果。