Responsive

如何精确控制响应式排版

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>元素——尤其是媒体属性——被设计来简化艺术指导。

响应式图片101(五):图片尺寸

上一次我们已经发现了srcset宽度描述符的威力,但他们同时也面临着新挑战-当图片开始下载时浏览器知道的只有视窗尺寸。现在,是时候认识这篇故事里的英雄了:sizes属性。

页面

返回顶部