Responsive

响应式图片101(七):Type

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

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

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

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

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

响应式图片101(四):srcset宽度描述符

响应式图片101系列教程中的第三篇中,我们学习了显示密度描述,并且总结出它们适合用于固定宽度图片,但是对于自适应图片有所不足。伸缩使图片就需要用到srcset的宽度描述符。

响应式图片101(三):图片分辨率

自从苹果发布带retina显示屏的iPhone 4,网页设计人员一直在找一个处理高分屏的方案。于是引入了srcset和它的显示密度。首先提醒大家,显示密度是一种分辨率切换使用情况。当我们解决分辨率切换问题时,我们需要使用srcset。我们想要使用srcset的原因是它让浏览器可以选择。当使用<picture>元素提供的media属性时,实际上我们在告诉浏览器必须使用哪个图片。这对于艺术切换很有效。遇到分辨率切换的情况时,浏览器知道哪张图片显示效果最好。它可以根据网络情况或用户行为等因素来做决定。

响应式图片101(二):图片加载

我们需要的响应式图片解决方案的主要原因之一是<img>元素功能不足。它只有一个src属性,只能加载一张图片资源,但是我们需要加载多个资源。既然如此,你可能会很惊讶怎么我们还在讨论<img>元素而不是其他新东西例如<picture>srcset。不管采用哪种响应式图片方案,<img>元素必不可少<img>元素在所有的内联响应式图片解决方案中都饱受诟病。我喜欢把img当做一个添加和应用所有响应式图片规则的盒子。

响应式图片101(一):定义

过去这些年,我们写了不少关于响应式图片的文章。如今既然响应式图片已经运用在浏览器里了,似乎也是时候回顾和总结一些入门指南给那些刚刚开始探索响应式图片的同学。因此,我们推出一个新系列叫做响应式图片101,在里面我们会谈到为什么需要响应式图片以及如何选择正确的响应式图片解决方案。让我们深入学习吧!

当响应式图片变丑时应该如何处理

我结束了最近的“如何使用<picture>srcset”教程,不知道你们是否也看过。给大家呈现了一些简单的知识来达到很好的教学目的,却没有让你为更多的不寻常的应用程序遇到的难看的效果做处理。我遇到过一些比较冷僻的例子和需要当心的怪异模式,也发现了一些上面说的不寻常的应用程序。可能他们可以帮到你。

Responsive Image:使用srcset

今天给大家介绍有关于响应式设计中的一个新东西,现在也比较流行:响应式图像。RWD不是一个新话题,但实现它的方法并不轻松,在实现过程当中充满了陷阱。尤其是当RWD涉及到图片的处理时,有很多问题还有待于解决。

Responsive Hero Images

Hero images 给响应式设计提出了独特的挑战。在最近的响应式图片核查期间,我们发现了一个独特的解决方法,一个我想要分享的方法。直到几年前,我都不熟悉Hero image这个术语。一个就职于大公司的朋友用这个术语,我不得不问这个是什么意思。我不知道这是不是一个常见的描述因为我与世隔绝了。或者这可能是大公司的术语。

页面

返回顶部