Responsive Web Design实战(二)

Responsive Web Design实战(一)中我们介绍了基本的概念。

这次我们说说细节。

技术之本

CSS中的@media是实现RWD的根基,这让网站可以查询来访设备的屏幕宽度而做相应的设计调整。

提示:使用LESS可以让对应的CSS规则变化内聚在一块,否则你会发现CSS文件会写成一坨一坨的。

也别忘记告诉手机不要自动缩放你的页面:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

当然,后端有时也需要借助User-Agent信息做灵活地适配,裁剪页面。

分门别类

需要将屏幕宽度划分为少数几类,对应去做设计和实现。就像iOS开发会区分@2x,Android开发会区分ldpi/mdpi/hdpi一样。

  • 320
  • 600
  • 768
  • 1280

君子之善

借助Bootstrap,我们可以利用container-fluid和row-fluid实现自适应,你会发现hidden-phone也能帮不少忙。

测试工具也很重要,蚂蚁用的是Responsive design testing tool - viewport-resizer

扩展阅读

和RWD一起因为上网设备多样化、移动化的另两股潮流,一个是RESTful API,另一个是扁平化设计/Flat Desgin。以后有时间会讲一讲。

资源

Readings

Book

Tutorial

Examples

Framework

Gallery

喜欢这篇文章就分享到微博吧!
留言请发送到
微信公众帐号
“技术派”

修订历史:


知识共享许可协议

关注@好看簿的蚂蚁

探讨技术、设计、人文和商业
相关的创业话题