【译】一行css代码搞定响应式布局
译文出自:闪电矿工翻译组
原文地址: medium.com/free-code-c…
原文作者: Per Harald Borgen
仓库原文链接:issue
译者: hanxiansen
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量。最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询。ok,让我们发车吧。
设置
在本文中,我将继续使用我在第一篇 CSS Grid 布局教程文章中的网格布局。然后,我们将在文章末尾添加图片。下面是我们初始化网格的外观:
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 网格布局没有任何影响
如果这段代码让你感到困惑,我建议你去好好读下我的这篇文章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 3fr
,第二列的宽度将会是其它两列的两倍。总宽现在是四个 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 布局无关,但让我们看下代码。
我们在每个网格中添加一个图片标签:
<div><img src="img/forest.jpg"/></div>
复制代码
为了使图片适应于每个条目,我们将其宽、高设置为与条目本身一样,我们使用object-fit:cover
。这将使图片覆盖它的整个容器,根据需要,浏览器将会对其进行裁剪。
.container > div > img {width: 100%;height: 100%;object-fit: cover;
}
复制代码
效果如下:
ok!现在你已经了解了 CSS Grid 布局中最复杂的概念之一了,请给自己一个赞吧。
浏览器兼容性
在结束本文前,我提下浏览器支持情况,在撰写本文时,全球77%的网站将支持 CSS Grid,而且比例还在逐步攀升。
我想想2018将是 CSS 网格布局的元年。它将获得突破,并成为前端开发者的必备技能,就像过去几年 CSS Flexbox 布局发生的情况一样。
转载于:https://juejin.im/post/5d0ad9a4f265da1bae38ffe6
【译】一行css代码搞定响应式布局相关推荐
- 【Python基础】pandas的骚操作:一行 pandas 代码搞定 Excel “条件格式”!
来源:Python数据科学 作者:东哥起飞 本篇是pandas100个骚操作系列的第 7 篇:一行 pandas 代码搞定 Excel "条件格式"! 系列内容,请看????「pa ...
- About 一行Python代码搞定局域网内文件共享与传输
一行Python代码搞定局域网内文件共享与传输 前提:环境中有Python安装,并配置环境变量. 1.共享目录:Windows下,在要共享文件目录下,shift+鼠标右键,在此处打开命令行窗口(CMD ...
- 三行CSS代码搞定镜头平移(Panning Shot)动画
什么是镜头平移,一目了然看下图的镜头效果: 在视频场景中,经常需要实现镜头平移的效果,摄影术语上这叫做Panning Shot,动画中实现镜头平移效果的方法很多种,比如在codepen中搜了下,就找到 ...
- html页面的响应式布局,HTML+CSS十分钟实现响应式布局页面,响应式布局实战教程...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
- CSS:使用CSS媒体查询创建响应式布局
现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...
- 【css】如何实现响应式布局
"自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" c ...
- 神操作!一行Python代码搞定一款游戏?给力!
来源:pypl编程榜 一直以来Python长期霸占编程语言排行榜前三位,其简洁,功能强大的特性使越来越多的小伙伴开始学习Python .甚至K12的同学都开始学习Python 编程.新手入门的时候趣味 ...
- python 一行_一行 Python 代码搞定炫酷可视化
cf.set_config_file(offline=True) 然后我们需要按照上面的使用格式来操作,首先我们需要有个DataFrame,如果手头没啥数据,那可以先生成个随机数.cufflinks有 ...
- 用一行 Python 代码搞定炫酷可视化
作者:xiaoyu,半路转行数据,首发自Python数据科学 前言 学过Python数据分析的朋友都知道,在可视化的工具中,有很多优秀的三方库,比如matplotlib,seaborn,plotly, ...
最新文章
- 3D打印,智能砖,竹子城市……改变未来建筑业的8项技术
- 基于HttpClient的HttpUtils(后台访问URL)
- 正则小记 javascript
- 【写实与风格化】技术概述
- Winfrom 弹出窗体位置设定
- Openjudge-计算概论(A)-放苹果
- 繁体简体转换器 v 1.0
- linux yun nginx,Linux - CentOS 7 通过Yum源安装 Nginx
- Xamarin.Form 超链接 用手势实现
- 早先离开这个公司的人,都比吾聪明
- 完整的VBA代码宝助手(完全开源)
- nginx配置解决跨域问题
- 【Linux】imx6ull Kernel 源码下载和编译环境配置
- IC卡密码的破解方法浅谈
- 计算机操作员考试模拟在线考试,计算机操作员高级问答集考试卷模拟考_试题...
- (灵魂拷问)MySQL数据库高频面试题,助你脱颖而出
- “代理服务出现问题,或者地址有误“解决方案
- python修炼之pip基本命令
- Python实现Word2vec学习笔记
- 学JAVA还是学Python
热门文章
- python 函数的嵌套 和 作用域链
- 无界阻塞队列 LinkedBlockingQueue 原理探究
- 论 MySql InnoDB 如何通过插入意向锁控制并发插入
- mpvue开发小程序所遇问题及h5转化方案
- c#NPOI读取excel 比interop和Microsoft.Jet.OLEDB.4.0 之类 的好的多
- Golang访问Redis初体验
- 【树莓派 Raspberry-Pi 】系统安装及一些必要的配置
- linux下nginx编译安装
- Windows 到 Linux 之旅: 第 8 部分. 备份与恢复
- 为什么我们都要等到失去后才知道珍惜呢(转载)