如何在智能手机上并排显示两个 div？

Question

我有 4 个 div，在普通计算机屏幕上，它们并排显示以下代码。

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 { 
  grid-area: 1 / 1 / 2 / 2; 
}

.div2 {
  grid-area: 1 / 2 / 2 / 3;
}

.div3 {
  grid-area: 1 / 3 / 2 / 4; 
}

.div4 {
  grid-area: 1 / 4 / 2 / 5;
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

当我在智能手机上查看时，所有 4 divs 将显示在 1 行中。如何在 1 row 中显示 2 divs？所以最终结果将是 2 rows 和 2 divs 每个在智能手机上。

Answer 1

您可以使用 @media screen 为不同的屏幕尺寸自定义 Css。

@media screen用于为不同的屏幕尺寸指定不同的布局。

您可以在这里找到指南：

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

本指南还包含一些示例，您可以从中了解如何统一 @media screen 事物。

Answer 2

将此行：grid-template-columns: repeat(4, 1fr); 更改为：grid-template-columns: repeat(2, 1fr); 那么每行只有 2 列。

然后将此行：grid-template-rows: 1fr; 更改为：grid-auto-rows: auto; 以根据需要自动插入尽可能多的行，并将它们的大小设置为最高内容。

最后但并非最不重要：删除所有 div-框的 css，因为它们在这种情况下无论如何都是无用的。它也不是或应该使用的方式。

使用媒体查询调整不同屏幕尺寸的设计，如下例所示：

@media 开始媒体查询。使用 only screen 您可以定义仅应使用屏幕尺寸作为规则。 and (max-width: 480px) 定义适用于移动屏幕的规则（竖屏模式下最大宽度为 480 像素）。

.parent {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 0px;
}

@media only screen
  and (max-width: 480px) {
    .parent {
      grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen
  and (min-width: 481px) {
    .parent {
      grid-template-columns: repeat(4, 1fr);
    }
}

<div class="parent">
  <div class="div1">1</div>
  <div class="div2">2</div>
  <div class="div3">3</div>
  <div class="div4">4</div>
</div>

如何在智能手机上并排显示两个 div？

How to display two divs next to each other on a smartphone?

html

css

grid