本文介绍了响应式Web设计的基础知识，包括响应式Web设计的三剑客——流式布局、媒体查询和弹性图片。文章探讨了设计模式，如设备优先和移动优先，并概述了开发流程，强调适配性和迭代验证的重要性。此外，还提到了使用Foundation框架快速构建响应式网站，以及快速原型开发。最后，讨论了响应式布局的基础，如CSS盒模型、百分比布局和可缩放图像。
《响应式Web》(The Responsive Web) 学习笔记一
开创性技术文章： 《Responsive Web Design》(Ethan Marcotte)
响应式Web设计的理念是：页面的设计与开发应根据用户行为以及环境设备（系统平台，屏幕尺寸，屏幕定向等）进行相应的响应和调整。
响应式Web设计三剑客：
- 流式布局：以百分比为单位。如Bootstrap
- 媒体查询：设备类型，分辨率，屏幕物理尺寸及色彩等
- 弹性图片：图片可以根据当前的视窗自适应展示，包含图片，图标，图表及视频等
设计模式
- 设备优先：断点为了适应各种设备的宽度值，基于设备；
- 移动优先：根据内容的可读性，易读性来确定断点，从而无视设备。设计模式是基于内容的。
开发流程
响应式Web讲究适配性。团队间需要迭代和改进彼此的工作方式，用户体验和开发不断进行迭代。迭代周期中会不断交付和验证成果。
通过专注于适配并为网站提供一个
流式布局，网站将获得如下几点好处。
- 能够适配不同屏幕大小的布局技术； <
最低0.47元/天 解锁文章
扫一扫
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
