原创力文档- 1、本文档共71页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
《构建响应式web页面布局》.pdf
Building
Responsive
Layouts
by Zoe Mickley Gillenwater
@zomigi
翻译: iXieMin
http://xiemin.me
August 28, 2012
Responsive Web Design Summit
What I do
Books Web
Stunning CSS3: Accessibility
A Project-based Guide to specialist at ATT
the Latest in CSS
Visual designer
CSS developer
and consultant
Flexible Web Design:
Creating Liquid and Elastic
Layouts with CSS
ü
why
responsive web design works
ü ü
what why
响应式设计意味着什么？
ü ü ?
what why how
怎么做响应式设计？
流式/ 液态 布局
宽度使用百分比的方式，以适应
视口大小
混合布局
固定栏 + 灵活栏， 只有固定栏
响应式设计
利用media queries，实现流式布局
和灵活的图像适应
/articles/responsive-web-design/
自适应布局
是多个固定宽度的布局并且利用
media queries让位置相互之间变
换
/tutorials/adaptive-layouts-media-queries
看啊！
这有多艰难啊！
我在这如此高的地方有
多危险啊！
Oh, 等等…
怎么才能
做到流式
布局?
开始设定一个div容器，margin为6%
添加相对内浮动
三栏式布局: 两栏中一列嵌套另两栏
百分比是相对的
确定嵌套列的宽度
你希望的列宽
文档评论（0）