如何使用h5语言通过添加一行CSS来使HTML响应式

设置

这是我们初始网格的外观:

这是HTML:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

和CSS:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

注意:该示例还具有一些基本样式,此处不再赘述,因为它与CSS Grid无关。

分数单位的基本响应

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

这里发生的是,网格将整个宽度分为三个部分,每列各占用一个单位。结果如下:

如果将grid-template-columns值更改为1fr 2fr 1fr,则第二列的宽度现在将是其他两列的两倍。现在,总宽度为四个小数单位,第二个占两个,而其他每个占一个。看起来是这样的:

先进的响应能力

重复()

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

换句话说,repeat(3, 100px)与相同100px 100px 100px。第一个参数指定所需的列数或行数,第二个参数指定其宽度,因此这将为我们提供与开始时完全相同的布局:

自动适应

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

这导致以下行为:

它只是试图将尽可能多的100px宽的列​​装入容器中。

minmax()

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);
}

请注意,所有响应都在一行CSS中发生。

添加图像

<div><img src="img/forest.jpg"/></div>
.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

浏览器支持

预览

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发

请登录后发表评论