如何为设备设置不同的网格大小？答案

【问题标题】：How to set a different grid size for device?如何为设备设置不同的网格大小？
【发布时间】：2021-06-21 19:45:05
【问题描述】：

我正在使用以下代码：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 0fr));
  grid-gap: 20px;
  align-items: stretch;
}

.grid>article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  background: #fafafa;
}

.grid>article img {
  max-width: 100%;
  min-width: 100%;
}

.text {
  padding: 0 20px 20px;
  color: black;
}

<main class="grid">
  <article>
    <img class="grid" width="420px" src="image.jpg" />
    
    </a>
    
    <div class="text">
      <h3>Automating code assignment
      
      </a>
      
      </h3>
      <p></p>
    </div>
  </article>

  <article>
    <img class="grid" width="420px" src="image2.jpg" />
    
    </a>
    
    <div class="text">
      <h3>Automating code assignment 2
      
      </a>
      
      </h3>
      <p></p>
    </div>
  </article>

  <article>
    <img class="grid" width="420px" src="image3.jpg" />
    
    </a>
    
    <div class="text">
      <h3>Automating code assignment 3
      
      </a>
      
      </h3>
      <p></p>
    </div>
  </article>
</main>

所以适合电脑的尺寸是420px，但是，我想为设备调整它，因为这个尺寸对于设备来说太大了。

谢谢你:)

【问题讨论】：

检查@媒体规则w3schools.com/cssref/css3_pr_mediaquery.asp
旁注：minmax(420px, 0fr) 没有任何意义，它与420px 相同。
@connexo 更具体地说 0fr 没有意义
欢迎来到stackoverflow，在这里提问之前请先做一点研究。这是stackoverflow.com/questions/48044016/… 的副本
正如@zerbene 所说，请查看 w3schools.com，它提供了大多数情况下使用 css 时需要的文档和示例。

标签： html css

【解决方案1】：

为此使用 css 媒体查询。例如下面这段代码只适用于宽度小于 576px 的屏幕：

@media (max-width: 576px) {
 .text {
   padding: 0 20px 20px;
   color: black;
 }
}

下面的代码部分同样适用于宽度大于 576px 的所有屏幕。

@media (min-width: 576px) {
 .text {
   padding: 0 20px 20px;
   color: black;
 }
}

【讨论】：