原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
辨析响应式网页的浮动布局和伸缩盒子布局
文章编号：1007—1423(2014)15—0042—06 DOI：10．3969／j．issn．1007—1423．2014．15．011
辨析响应式网页的浮动布局和伸缩盒子布局
谢冠怀
(广东省机械高级技工学校 ．广州 510450)
摘要 ：
介绍响应式网页设计的的发展 ．并通过模拟实现响应式浮动布局和响应式伸缩盒子布局两种响应式网页布局技术 ．
来比较两种技术的优劣和未来发展方向，得出伸缩盒子布局将会取代现在主流的浮动布局．在响应式网页设计上也
将会发展为响应式伸缩盒子布局取代响应式浮动布局。
关键词 ：
响应式 ：伸缩盒子 ；浮动布局
0 引言 个弹性盒子草案至今 ，已更新过多次．其提供的全新的
布局伸缩盒子嘲．因其专为布局和响应式而设计 。给网
随着各种手持移动设备终端的快速发展 ．智能手
页布局带来了新的思路 ，对响应式布局更是福音。
机 、平板 电脑、智能家 电等新设备层出不穷 ，移动互联
网入 口份额快速增长．但移动设备终端的视 口大小不 1 响应式浮动布局和响应式伸缩盒子布局
一 ． 屏幕分辨率千差万别 ．给网站开发人员带来不小的 的实现技术
挑战．传统的固定宽度 (例如 960像素)网页设计已经
响应式浮动布局和响应式伸缩盒子布局都使用同
不能满足各类移动用户浏览网页的个性需要 ．响应式
样的前端结构代码，而使用不同的CSS样式表来实现。
网页设计孕育而生
1．1前端结构页面代码
伊桑 ．马特科 fEthanMarc0tte)在其发表 的文章
!doctypehtml
ResponsiveWebDesign中认为．响应式网页设计就是
html
将弹性网格布局 、弹性图片、媒体和媒体查询等这些已
head
有的开发技巧整合起来进行网页设计 ．以适应不同视
metacharset=”utf-8”
口设备终端的浏览需求i1】 !一页面宽度与设备实际宽度相 同一
BenFrain在 其 出版 的 Responsive WebDesing metaname=’’viewport”content=”initial—scale=2．0．width=
withH L5andCSS3一书提供 的响应式网页设计方 device-width”，
法是 ：在原有固定宽度网页设计基础上 ，结合媒体查 titlenl~应式布局／title
询．将固定宽度修改为百分 比．将字体行距的大小单位 linkhref=”css／sty．CSS”rel=”stylesheet’’type=’’text／css”
修改为EM．对图片进行 自适应设置川 ／head
网页布局是网页实现的框架．对整个网页视觉效 body
果起到非常关键的作用 浮动布局 f也称 DIV+CSS布 divclass=”hea
文档评论（0）