特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
这篇文章主要是整理了国外两场有关于CSS分享大会分享的相关主题,前面一部分是@Chris Coyier在CSS Dev Conf大会上做的相关笔记。最后在文章末尾附上了2016年CSS Conf分享的相关主题。如果你对CSS相关话题感兴趣的话,可以关注2016年12月17日在中国广州举办的第三届CSS Conf大会相关主题。
特别声明:文章中附有多份Slides和Videos,而且大部分都在墙外,如果在浏览器不能看到相关数据,请君自备天梯到墙外。
我连续五年都参加了CSS Dev Conf大会。虽然这个会议聚集点有点小,但说实话我一直非常喜欢这种会议。每次会议不会有什么大惊喜,主要集中在分享CSS方面的主题,对于我而言,在这里每一次都可以获取到CSS有关的最新资讯和趋势。
过去在CSS Dev Conf出现的主题:预处理器、CSS架构、测试、性能...去年主要讲的是SVG
CSS Dev Conf是一个多轨道(multi-track)会议,加上我错过了最好的机会在上面展示和讲述CodePen。所以下面的的内容并不是代表整个会议的。我只能说对不起,明年重新来过。
Mike Riethmuller分享的响应式排版
响应式排版其更确切的说是“先进的洗式排版”。他还获得最佳展示!我想,这是应得的。
他从介绍calc()
如何工作开始,然后引入视窗单位(viewport units)以及将这些运用到font-size
属性上。最后的结果就是“流式排版”,不管是基于屏幕的尺寸还是最小值或最大值。效果看上去很清爽,比单独使用视窗单位(或SVG)还要舒服。
@MadeByMike在CodePen写的一个示例:Precision responsive typography。 建议在新窗口中打开这个示例,然后缩放浏览器视窗大小,你可以看到一个非常清爽的流式排版效果。
这个方案可以用来替代使用媒体查询断点改变font-size
固定值的方案。
这个方案较大的争论是:
- 这就类似于自适应布局和响应式布局之间的区别。我们都知道响应式设计获取了
- 根据断点来调整
font-size
并不是那么令人满意 - 它基本上就是一行代码,所有采用这个方案应该还是很容易的
这还是全部的!如果是按比例进行缩放,有点类似于SVG中的<text>
。那么它的极限性就非常的小,而且可以扩展出其他的概念:
- 流式模块缩放:
header
中的文本在大屏幕上是旁边文本的1.5
倍,但在小屏幕上是1.2
倍 - 流式Vertical Rhythm:不仅仅改变
font-size
,而且line-height
和其他间距也能更好和适配
扩展阅读
- Fluid Type Blogs
- Truly Fluid Typography With
vh
Andvw
Units - Fluid typography with viewport units
- FLUID TYPE
- Readable, Fluid Type With Basic CSS Smarts
- vertical-rhythmic 3.0.1
- A guide to vertical rhythm
David Khourshid分享的响应式动画(Reactive Aniamtion)
这是一些严重的CSS trickery。使用JavaScript来控制CSS的变量,就像是给CSS深度访问DOM事件。
David在他的写的演示示例中采用了RxJS和他自己的RxCSS库。
他以前分享过类似的话题:
因为CSS Dev Conf,David收集了很多演示CSS变量的案例。这也激发了其他几个人一起探索这个领域,比如:
如果你从未接触或了解过有关于CSS变量相关知识点,建议你可以先阅读一下《深入学习CSS自定义属性(CSS变量)》。
Alicia Sedlock分享的如何抵抗疲劳
这个主题引起了观众的共鸣。在这个话题中我学会了“brownout”这个词:
如需转载,烦请注明出处:https://www.w3cplus.com/css/notes-css-dev-conf-2016.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!