一行css代码搞定响应式布局

appetizerio 发布于2019-08-30 11:12 / 901人阅读

摘要：最精彩的地方在于所有的响应特性被添加到了一行代码中。基础响应单位栅格布局带来了一个全新的值单位，单位通常简写为，它允许你根据需要将容器拆分为多个块。

原文地址: https://medium.com/free-code-...

原文作者: Per Harald Borgen

翻译作者: hanxiansen

在这篇文章中，我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图，它将根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起，也不必为每个屏幕创建媒体查询。ok，让我们发车吧。

设置

在本文中，我将继续使用我在第一篇 CSS Grid 布局教程文章中的网格布局。然后，我们将在文章末尾添加图片。下面是我们初始化网格的外观：

HTML 代码：

CSS 代码：

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

注意: 示例中有一些基础的样式，但我在这里没有写出来，因为这对 CSS 网格布局没有任何影响

如果这段代码让你感到困惑，我建议你去好好读下我的这篇文章Learn CSS Grid in 5 minutes ，其中就详细的解释了布局的基础知识。

让我们让列开始具有自适应特性吧。

基础响应单位: fraction

CSS 栅格布局带来了一个全新的值:fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。

让我们将每一列更改为一个 fraction 单位宽:

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

结果是栅格布局将会把整个宽度分成三个 fraction，每列占据一个 fraction 单位，效果如下：

如果我们将grid-template-columns的值更改为1fr 2fr 1fr，第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction。效果如下：

总的来说，fraction 单位值将使你可以很容易的更改列的宽度。

高级响应

然而，上面列子并没有给出我们想要的响应性，因为网格总是三列宽。我们希望网格能根据容器的宽度改变列的数量。要做到这一点，你必须学习如下三个概念：

repeat()

首先我们学习repeat()函数。这是一个强大的指定列和行的方法。让我们使用repeat()函数来更改网格:

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

在上面代码中，repeat(3, 100px)等于100px 100px 100px。第一个参数指定行与列的数量，第二个参数指定它们的宽度，因此它将为我们提供与开始时完全相同的布局：

auto-fit

然后是auto-fit。让我们跳过固定数量的列，将3替换为自适应数量：

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

效果如下:

现在，栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。正如你在上图看到的，网格通常在右侧留有空白。

minmax()

为了解决上述问题，我们需要minmax()。我们将 100px 替换为 minmax(100px, 1fr)，代码如下：

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

请注意，所有响应都发生在一行 css 代码中

效果如下：

正如你所见，效果完美。minmax()函数定义的范围大于或等于 min，小于或等于 max。

因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 100px。

添加图片

最后一步是添加图片。这与 CSS Grid 布局无关，但让我们看下代码。

我们在每个网格中添加一个图片标签：

为了使图片适应于每个条目，我们将其宽、高设置为与条目本身一样，我们使用object-fit:cover。这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪。

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

效果如下：

ok！现在你已经了解了 CSS Grid 布局中最复杂的概念之一了，请给自己一个赞吧。

浏览器兼容性

在结束本文前，我提下浏览器支持情况，在撰写本文时，全球77%的网站将支持 CSS Grid，而且比例还在逐步攀升。

我想想2018将是 CSS 网格布局的元年。它将获得突破，并成为前端开发者的必备技能，就像过去几年 CSS Flexbox 布局发生的情况一样。

云服务器 GPU云服务器响应式布局 asp如何响应式布局 html响应式导布局响应式网站代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114842.html

《CSS世界》笔记一：流/元素/尺寸

摘要：一流体布局引出的几种网页布局方式布局方式描述特点场景静态布局，传统设计，网页上的所有元素的尺寸一律使用作为单位。世界中，提出了流体布局的概念所谓流体布局，指的是利用元素流的特性实现的各类布局效果。下一篇：《CSS世界》笔记二：盒模型四大家族写在前面初读《CSS世界》还是在深圳，属于换工作前的充能。那时候除了工作，其他时间基本都在这本书里了，因为它的确吸引人。之前看过《CSS揭密》...

hizengzeng 2019-08-30 15:54 评论0 收藏0
一行css代码轻松实现前端响应式布局（vw+rem）

摘要：大家知道可以用来做响应式布局，只是元素上的样式需要根据屏幕宽度来指定。今天突然想到这个单位，发现用它来做响应式布局实在太方便了。只需一行屏幕标准宽，全部宽度是，即也就是每像素。这个值也可根据自己需要调整数值。具体实现的完整代码请参考大家知道rem可以用来做响应式布局，只是html元素上的font-size样式需要根据屏幕宽度来指定。之前有用@media媒体查询，根据各种屏幕宽度写h...

piapia 2019-08-30 15:54 评论0 收藏0
前端入门24-响应式布局（BootStrap）

摘要：声明声明本篇内容摘抄自以下两个来源中文网感谢大佬们的分享。版本是全球最受欢迎的前端组件库，用于开发响应式布局移动设备优先的项目。官方示例官方示例版本，官方还没有中文教程，的中文教程倒是很齐全了。声明本篇内容摘抄自以下两个来源： BootStrap中文网感谢大佬们的分享。正文-响应式布局（BootStrap）这次想来讲讲一个前端开发框架：BootStrap BootStrap 目前...

lunaticf 2019-04-23 13:06 评论0 收藏0
（转）响应式和自适应区别

摘要：于是出现了一种新的布局方式宽度自适应布局。下面再从直观一点的来看，响应式和自适应的区别首先两种方式解决问题的是不一样的。响应式的概念应该覆盖了自适应，而且涵盖的内容更多。图片的自适应除了布局和文本，自适应网页设计还必须实现图片的自动缩放。自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 整理了几篇自适...

rockswang 2019-08-20 14:45 评论0 收藏0