• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

fit-content()函数

214 0

css3的grid格子布局中,对于设置格子大小的处理,要么是固定的,要么是百分比这种相对的。

如果电脑端这个header的高度为50px,而手机端由于大小限制,原来50px可能要变成30px,那么此时我们可以利用媒体查询去调整:grid-template-rows属性。

grid-template-rows: 30px 1fr;

调整完这个大小后,我们还要调整里面元素的大小,这样做可能有点麻烦。

甚至于我们可能只是改变了里面元素的布局而已,横向的布局改为竖列的多行布局,那么这个高度可能是无法精确获取的,如果内容的高度为100px呢,而我们只设置了30px

grid的默认效果会是一个overflow: hidden;也就是说元素会将超出部分自动截断,这显然不符合我们的需求。

fit-content()是一个非常有用的函数,虽然他的官方说明和实际效果有点出入,且只能用于grid中。

这个函数接收两个参数,第二个参数没什么用,懒得说了,第一个参数为元素内容过多时,最大也只能是传入的参数大小,比如我传入一个20px;那么不管元素包含的内容有多大,容器只有20px。

然而这个解释已经过时了,现在fit-content()传入的第一个参数没有实际作用了,但是不传又不行,传了,不管元素大小怎么变化,容器大小永远为最小的内容大小。

不传被视为auto了,所以这个要注意。

可能这里有人要讲,css3不是还有一个fit-content的属性值吗,然而这个属性浏览器还是需要加浏览器前缀的,在grid中也不支持使用该属性,而只能用于width的css设置。

所以用处有点局限性了。

例子:

.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, [col-start] 25% [col-end]);
  grid-template-rows: 200px auto fit-content(20px);
}
0
  • 本文分类:CSS
  • 本文标签:暂无标签
  • 流行热度:已超过 214 人围观了本文
  • 最后更新:2020年05月4日 - 3时20分58秒
  • 发布日期:2020年05月4日 - 3时20分58秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码