CSS Grid和自定义属性带来的变化

好久没有整理有关于CSS方面的文章了,说实在心理还是痒痒的,但取舍有度。不过最近看了几篇有关于CSS的文章还是蛮有意思的。两篇是关于页面布局的,另外一篇是关于动画函数的。事实上,布局动画在CSS中都是较为重要的部分。当然,今天要提的知识点并不是什么非常新的知识点,但也是有创意和创新的知识点。比如不通过媒体查询实现响应式布局,比如说容器单位构建强大的布局,比如说动画函数(缓动函数)的反转。听听这些是不是觉得非常有意思,如果你和我也一样,请继续往下阅读。

在继续下面的内容之前,先说一下这几个概念的出处:

不采用媒体查询实现响应式布局

首先要声明一点,在这里不会具体介绍什么是媒体查询,也不会说什么是响应式设计。虽然如此,但大家或许和我类似,在心里有一个概念,响应式设计会在不同的断点有不同的响应(即不同的布局效果),而这个不同的断点就是依赖于媒体查询来控制的。随着Web布局的发展,实现响应式布局我们从此可以抛开媒体查询来实现。正如@Juan Martín García的《Look Ma, No Media Queries! Responsive Layouts Using CSS Grid》文章中提到的相关技术。

中国第五届CSS大会(即将就要到来),知名CSS专家、Nexmo开发大使 @陈慧晶 老师的主题《新时代CSS布局》或许会给我们带来一些更新的布局技巧和姿势。就我自己而言,或许能猜到该主题要介绍的内容,但我还是非常期待。因为我一直有关注@陈慧晶 老师的文章和在国外分享的相关话题。

或许很多人会有疑问,不使用媒体查询怎么来实现响应式布局。针对该问题,我以前也同样没有思考过,自从最近阅读了@Juan Martin Garcia的文章,才恍然大悟,原来还可以这么玩,同时也再次验证了我的想法,未来的布局是CSS Grid的天下。

在小站上有关于CSS的Grid布局的教程也有不少,有关于相关的概念在相关的文章中也有相应的介绍。如果下文中提到的相关东西要是从未理解过,建议花点时间阅读一下有关于CSS Grid布局相关的教程

正因为CSS Grid布局有非常优秀的特性,比如fr单位repeat()函数

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/css-grid-and-custom-properties-bring-changes.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部