Responsive

不使用Media Queries的自适应CSS

虽然标题说不用Media Queries,但我还是要在开头讲清楚,本文并不是要大家丢掉Media Queries,也不是要抨击Media Queries。Media Queries实际上非常有用,我在各种地方都会用到。但Media Queries并不能解决所有的自适应的设计问题。常常有一种需求是根据元素所在的组件本身的大小来决定元素的排列,而不是整个视窗的宽高。要解决这类问题,Element Queries的概念诞生了。然而,Element Queries只停留在概念上,Mat Marquis 也针对这个概念提出了一些问题,并且称之为container queries。不过可惜这些都只停留在概念上。也许未来有一天,这些概念会成为现实,不过与此同时,我也来分享一些小技巧,你现在就可以用来处理某一类的问题。

如何精确控制响应式排版

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区,如何让文本显示的各为大气,又适合你的Web排版。

响应图片断点生成器

四年前,Jason Grigsby问了我一个出人意料的难题: 你是如何获取响应式图片断点的?一年之后,他得到了答案: 理想情况下,我们会设置响应式图片性能预算实现“在不同大小文件间的跳转。”Cloudinary创建了一种工具实现了这一想法,并且在社区获得了一致性的好评:“太棒了!现在,它还可以实现什么呢?

我所知道的所有的响应式网站排版

响应式排版是一个棘手的问题。我学习了很多的有关排版的问题,而且收集了一些非常棒的例子,比如使用相对单位,vertical rhythms和恰当的文本缩放排版。这些新的例子都是非常棒的,它们让我的网站更加美观,更加赏心悦目。但是,实现这些功能的过程却是非常糟糕的。在几个月的辛苦工作之后,现在我终于找到了一个可以和各位分享的一个解决方法——Typi。

如何使用 HTML5 的picture元素处理响应式图片

图片在响应式网页设计中是出了名的最具挑战性的方面之一。今天我们就来看看如何使用<picture>元素来处理响应式图片.固定宽度,像素完美的网站设计已经离我们远去了。在宽屏显示器,互联网电视,多尺寸的平板电脑和智能手机的今天,我们的设计必须应付一切可能,将宽由320px7680px转变。伴随这种多分辨率风景而至的,是需要拉伸或收缩图像,以适应这些不同的要求。这可以被理解为如下问题,矢量图形出现异常时,绝大多数具有特定像素的图像宽度并不改变。所以,我们应该怎么做呢?

响应式图片101(十):总结

我们做到了!我们到了响应式图片101系列的结尾。在与这个系列就此分别之前,我想给出一些提示,资源和一些关于响应式图片发展的最终思考。

响应式图片101(九):图片断点

我其实很害怕写响应式图片101系列里图片断点这个部分。选择图片断点每个人都会遇到,坦白说,我也没有一个好的解决方案。但我们迟早会遇到图片断点的问题。所以不妨现在就开始研究。

响应式图片101(八):CSS图片

大多数时候谈到响应式图片,人们指的是内联图片,而不是CSS图片。这是因为在<picture>srcset之前内联响应式图片还没有好的解决方案。但遇到CSS图片时,我们可以使用媒体查询,那还有什么可担心呢?现在是时候回顾响应式CSS图片并基于我们已经学过的内联图片寻找解决方案。

响应式图片101(七):Type

到目前为止我们专注于如何提高响应式图片性能。这是必要的,但是今天,我们依然在页面上使用一样的旧图片。现在,是时候看点有意思的东西了!

响应式图片101(六):picture元素

在第345部分中,我们专注于分辨率切换的解决方案。现在是时候来研究如何解决艺术指导了。<picture>元素——尤其是媒体属性——被设计来简化艺术指导。

页面

返回顶部