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

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

• 不采用媒体查询实现响应式布局来自于@Juan Martín García的博文
• 采用容器单位构建强大的布局来自于@Russell Bishop的博文
• 缓动函数的反转来自于@Michelle Barker的博文

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

首先要声明一点，在这里不会具体介绍什么是媒体查询，也不会说什么是响应式设计。虽然如此，但大家或许和我类似，在心里有一个概念，响应式设计会在不同的断点有不同的响应（即不同的布局效果），而这个不同的断点就是依赖于媒体查询来控制的。随着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()函数、