什么是响应式布局设计

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

1. 看一个例子:Mashable 的首页: 
浏览器窗口最大化时:

缩小浏览器窗口: 

再缩小:

再缩小:

以上就是一个响应式的实例。

 

2.理论上,响应式界面能够适应不同的设备。

描述响应式界面最著名的一句话就是“Content is like water”,成中文 “ 如果将屏幕看作容器,那么内容就像水一样 ” 。

3. 大白话解说:

很久很久以前,每个人都只有一件衣服( Website ),不管你有钱没钱大家每天都只穿这一件。

后来有人发明了舞会(移动互联网),大家都争先恐后地想要参加,于是一个做「开发」的裁缝忽悠人们说进舞会最好订做一件专门的礼服( Mobile Site ),大家想想也对,上班和出去哈皮都穿同一件衣服多无聊啊,舞会就要有舞会的样子。于是乎只要有点闲钱的人都做了礼服,他和原来那件叫做 Website 的衣服是完全不一样的,面子不一样,里子也不一样

后来舞会的种类越来越多了,很多人被迫做了好多好多件礼服,于是又有一个叫做「前端」的裁缝站出来说你们每年要新做那么多衣服,多费钱啊,而且一出门钥匙啊皮夹子啊名片都要在不同衣服里换来换去多麻烦。你看,我们新发明了一个手艺叫做「Responsive Design」,只要把你原来那件衣服稍微那么一改,以后去哪个舞会都可以只穿这一件衣服,衣服的里子永远都差不多,但面子可以按照要求自适应不同的舞会

于是所有人都开始换上这种名叫响应式的衣服 ...

 

以上内容出自知乎:https://www.zhihu.com/question/20976405

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值