CSS基础测试5：等比缩放正方形布局

[wingmeng]

题目：

---

我的答案：

直接使用强大的 Grid 布局，妥妥的。> 在线 DEMO <

<ul class="square-box">
  <li class="square-item bg-dark"></li>
  <li class="square-item bg-gray"></li>
  <li class="square-item bg-sienna active"></li>
  <li class="square-item bg-gold"></li>
  <li class="square-item bg-crimson"></li>
  <li class="square-item bg-orchid"></li>
  <li class="square-item bg-silver"></li>
</ul>

/* css reset */
html {font-size: 16px;}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 布局 */
.square-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);  /* 划分 5 个等宽片段 */
  grid-template-rows: 1fr 1fr;
  grid-gap: .5rem .375rem;
}
.square-item {
  padding-bottom: 100%;  /* 容器的 padding 百分比值按其宽度来计算 */
  outline: .15rem solid transparent;
}
.square-item.active {outline-color: #222;}

/* 颜色 */
.bg-dark    {background: #424242;}
.bg-gray    {background: #8c8c8c;}
.bg-sienna  {background: #d48b69;}
.bg-gold    {background: #fecb66;}
.bg-crimson {background: #c54941;}
.bg-orchid  {background: #591c93;}
.bg-silver  {background: #e6e6e6;}

/* 响应式断点（CSS基础测试4），基于 iPhone6 尺寸 */
@media screen and (min-width: 375px) {
  html {
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}

[wingmeng]

自我评分：优秀

优秀、良好、一般、差劲

不足之处：

1. 选中态使用了 outline，会强占了 :focus 聚焦状态样式，导致在某些特定场景下可访问性不好；

学习收获：

1. 加深对 Grid 布局的理解