一行 CSS 代码搞定响应式布局
编程微刊
共 2543字,需浏览 6分钟
· 2020-11-07
设置
<div class="container">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
<div>6div>
div>
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
注意: 示例中有一些基础的样式,但我在这里没有写出来,因为这对 CSS 网格布局没有任何影响
基础响应单位: fraction
fraction
单位,fraction
单位通常简写为fr
,它允许你根据需要将容器拆分为多个块。.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}
grid-template-columns
的值更改为1fr 2fr 1fr
,第二列的宽度将会是其它两列的两倍。总宽现在是四个 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);
}
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。添加图片
<div><img src="img/forest.jpg"/>div>
object-fit
设置成cover,这将使图片覆盖它的整个容器,根据需要,浏览器将会对其进行裁剪。.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
浏览器兼容性
文末彩蛋
编程·思维·职场
欢迎扫码关注
评论
会写代码的总理!全球第一“开源”名门望族
转自:OSC开源社区4 月 15 日,新加坡总理公署发表声明宣布,总理李显龙将于 5 月 15 日辞职,并正式交棒给副总理兼财政部长黄循财。对于李氏家族下一代是否会继续活跃在新加坡政坛,目前外界说法不一。但在开源圈里,李氏家族绝对有一席之地。李显龙有 4 名子女,其本人、次子,以及幼子都有非常专业的
开源前哨
0
原来Matplotlib能画股票K线图!!附代码
之前在一篇文章中提到Matplotlib可视化,甚至可以用来画股票K线图,许多同学也在问代码,这次来发个文回应下。Python用matplotlib绘制K线图,需要配合talib、numpy、mpl_finance等第三方库来使用,效果展示如下:简单讲讲K线图的结构,我不搞股票,所以不太懂,特地查了
Python大数据分析
9
分享一份抓取某东商品名称、价格和评论数的代码
点击上方“Python共享之家”,进行关注回复“资源”即可获赠Python学习资料今日鸡汤芳草已云暮,故人殊未来。大家好,我是皮皮。一、前言前几天在Python白银交流群【邮递员】问了一个Python网络爬虫的问题,提问截图如下:代码如下:import requestsfrom
IT共享之家
0
自动控制方面的大牛们/2D圆盘跟随式AI涂胶视觉检测系统/点光谱弧面玻璃轮廓度检测
微信改了推送规则,如果您还想收到我们的推送!点击上方“机器视觉”,右上角...选择“置顶/星标”公众号行业资讯机器视觉十大应用场景介绍 控制理论研究领域目前遇到的瓶颈是什么? 控制理论到底有什么用?自动控制方面的大牛们都有哪些主要贡献?OpenCV 5 进度更新 2024 年 4
机器视觉
0
8则实用的纯CSS布局排版技巧 | 网易4年实践
「链接和长图失效,请大家点击阅读原文查看详情」前言开发每一张网页都离不开布局排版,基于良好布局排版打下基础,才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上,没办法解决的布局排版都用JS实现😂。今时不同往日,现代CSS属性能更好地快速实现各种布局排版,节约更多时间去摸鱼😉。
前端迷
10
【Nucleic Acids Research】利用生成式深度学习模型设计蓝藻细菌的合成启动子
题目:Design of synthetic promoters for cyanobacteria with generative deep-learning model期刊:Nucleic Acids Research影响因子:19.16发表时间:2023.5.29原文作者:Euijin Seo
生信宝典
0
只要会说话,不写代码也能开发!百度又搞了一个大动作
将Python客栈设为“星标⭐”第一时间收到最新资讯 新智元报道 编辑:编辑部【新智元导读】文心大模型4.0,半年时间又提升了52.5%,在智能体、代码、多模型上也有了新进展!像人一样思考的智能体,达到了一定程度的白盒;智能代码助手Comate,让开发者们
Python客栈
0
大厂不再强制要求员工设定OKR,员工:“OKR让我讨厌到想辞职”;阿里云:以后公司 20% 代码由通义灵码编写;华为最新分红出炉
架构师大咖
架构师大咖,打造有价值的架构师交流平台。分享架构师干货、教程、课程、资讯。架构师大咖,每日推送。
公众号该公众号已被封禁0、大厂不再强制要求员工设定OKR,员工:“OKR
源码共读
0