响应式设计在文字排版上的尝试,针对屏幕大小显示不同长度的文字内容

xinzhix·2013年01月13日 23:58
Responsive Web Design 即响应式 Web 设计,可以分别对桌面、平板、手机分辨率自动调整页面布局,除了 Responsive Design 还有 Responsive Image(根据屏幕大小显示缩放或剪裁的图片),现在有人尝试 Responsive Text ,可以让你在手机、电脑或者大屏幕上分布看到不同长度的文字内容。

Responsive Web Design 即响应式 Web 设计,可以分别对桌面、平板、手机分辨率自动调整页面布局,除了 Responsive Design 还有 Responsive Image(根据屏幕大小显示缩放或剪裁的图片),现在有人尝试 Responsive Text ,可以让你在手机、电脑或者大屏幕上分布看到不同长度的文字内容,示例如下:

较大屏幕显示完整内容:

较小屏幕显示更多内容:

小屏幕小时重点摘要:

当然这还只是一个尝试,实际应用可能会有很多问题,即同样的一个页面,在手机或者电脑上查看内容展现的信息量不同,或者与他人分享阅读阅读时会造成困惑或信息不对称。

相关链接:

  1. http://www.splatf.com/2013/01/responsive-design-text/
  2. http://www.frankieroberto.com/responsive_text

P.S. 本文也应用了类似的排版效果,你发现了么?

+1
4

好文章,需要你的鼓励

参与评论
评论千万条,友善第一条
后参与讨论
提交评论0/1000

下一篇

本来是无滤镜,不照片,但这两天北京的阴霾使得拍照都用不着选滤镜了啊。不过有很多场景需要的是毫不修饰且最本真的照片的,尤其是要充当证据的时候。比如车辆剐蹭后的拍照,比如租房前双方对屋内设施损坏度的确认,再比如二手货买卖时也很需要真实的商品图像。Splid这个照片应用(目前只有iOS版)就是针对类似的场景:

2013-01-13

36氪APP让一部分人先看到未来
36氪
鲸准
氪空间

推送和解读前沿、有料的科技创投资讯

一级市场金融信息和系统服务提供商

聚焦全球优秀创业者,项目融资率接近97%,领跑行业