响应式Web设计：HTML5和CSS3实战
关于作者
译者序
前言
第1章HTML5、CSS3和响应式网页设计入门? 1.1为什么智能手机很重要（而老版的IE不再重要）? 1.2响应式设计一定是最佳选择吗
? 1.3响应式网页设计的定义
? 1.4为什么要在响应式设计上停滞不前
1.5响应式网页设计示例
? 1.5.1下载视口调试工具
? 1.5.2在线创意源泉
1.6为什么HTML5很优秀
? 1.6.1省时省力
? 1.6.2新增了语义化标签元素
1.7CSS3为响应式设计和更多创新奠定了基础
? 1.7.1底线：CSS3不破坏任何东西
? 1.7.2CSS3如何解决日常设计问题
1.8看呐，不用图片
?CSS3还带来了什么
? 1.9HTML5和CSS3现在就能用吗
? 1.10响应式网页设计不是灵丹妙药
? 1.11引导客户：网站不必在所有浏览器中表现一致
? 1.12小结
第2章媒体查询：支持不同的视口
? 2.1现在就能使用媒体查询
? 2.2为什么响应式设计需要媒体查询
? 2.2.1媒体查询语法
? 2.2.2媒体查询能检测那些特性
? 2.2.3用媒体查询改造我们的设计
? 2.2.4加载媒体查询的最佳方法
? 2.3我们的第一个响应式设计
? 2.3.1我们的设计是固定宽度的，不要惊讶
? 2.3.2响应式设计中要保证图片尽可能精简
? 2.3.3小视口下的内容剪切
? 2.4阻止移动浏览器自动调整页面大小
? 2.5针对不同视口宽度修正设计
? 2.6响应式设计中内容始终优先
? 2.7媒体查询只是必要条件之一
?我们需要流动布局
? 2.8小结
第3章拥抱流式布局
? 3.1固定布局经不起未来考验
? 3.2为什么响应式设计需要百分比布局
? 3.3将网页从固定布局修改为百分比布局
? 3.3.1需要牢记的公式
? 3.3.2设置百分比元素的上下文
? 3.3.3必须时刻牢记上下文
? 3.4用em替换px
? 3.5弹性图片
? 3.5.1让图片随视口缩放
? 3.5.2为特定图片指定特定规则
? 3.5.3给弹性图片设置阈值
? 3.5.4超级全能的max-width属性? 3.6为不同的屏幕尺寸提供不同的图片
?设置自适应图片
?···把背景图片放在其他地方? 3.7流动网格布局和媒体查询的默契配合
? 3.8CSS网格系统
?使用网格系统快速搭建网站
? 3.9小结
第4章响应式设计中的HTML5
? 4.1HTML5的哪些部分现在就能用
? 4.1.1大多数网站可以用HTML5编写
? 4.1.2腻子脚本和Modernizr ? 4.2如何编写HTML5网页
? 4.2.1HTML5的精简之道
? 4.2.2HTML5标签的合理写法
? 4.2.3伟大的标签万岁
? 4.2.4HTML的废弃零件
? 4.3HTML5的全新语义化元素
? 4.3.1
? 4.3.2
? 4.3.3
? 4.3.4
? 4.3.5
?···HTML5的大纲结构算法
? 4.3.6
? 4.3.7
? 4.3.8
? 4.4HTML5结构元素的实际用法
?网站的主体内容怎么办？
? 4.5HTML5的文本级语义元素
? 4.5.1
? 4.5.2
? 4.5.3
? 4.5.4在页面中应用文本层语义元素? 4.6遵循WAI-ARIA实现无障碍站点
?ARIA的地标角色
? 4.7在HTML5中嵌入媒体
? 4.8用HTML5的方法为页面添加视频或音频
? 4.8.1提供备用的媒体源文件
? 4.8.2针对老版本浏览器的备用方案
? 4.8.3
? 4.10离线Web应用
? 4.10.1离线Web应用概述
? 4.10.2让网页可离线使用
? 4.10.3理解manifest文件
? 4.10.4页面被自动加载到离线缓存
? 4.10.5版本注释的用途
? 4.10.6离线访问网站
? 4.10.7离线Web应用的故障诊断? 4.11小结
第5章CSS3：选择器、字体和颜色模式? 5.1CSS3给前端开发人员带来了什么
? 5.1.1Internet Explorer6到8对CSS3的支持
? 5.1.2使用CSS3设计和开发页面
? 5.2CSS规则解析
? 5.3私有前缀及其用法
? 5.4快速而有效的CSS技巧
? 5.4.1CSS3多栏布局
?···增加栏位间隙和分割线
? 5.4.2文字换行
? 5.5CSS3的新增选择器及其用法
? 5.5.1CSS3属性选择器
?···1.CSS3的子字符串匹配属性选择器
?···2.一个活生生的例子
? 5.5.2CSS3结构伪类
?···1.:last-child选择器
?···2.nth-child选择器
?···3.理解nth规则的作用
?···4.否定（:not）选择器
? 5.5.3对伪元素的修正
?···:first-line对响应式设计来说好用吗
? 5.6自定义网页字体
? 5.6.1@font-face规则
? 5.6.2使用@font-face嵌入网页字体
? 5.7帮帮我，标题模糊怎么办
?在响应式设计中使用自定义@font-face字体的注意事项? 5.8新的CSS3颜色格式和透明度
? 5.8.1RGB颜色
? 5.8.2HSL颜色
? 5.8.3针对IE6、IE7和IE8提供备用颜色值
? 5.8.4透明通道
? 5.9小结
第6章用CSS3创造令人惊艳的美
? 6.1文字阴影
? 6.1.1HEX、HSL或RGB颜色都可以
? 6.1.2px、em或rem都行
? 6.1.3取消文字阴影
?···左上方阴影
? 6.1.4制作浮雕文字阴影效果
? 6.1.5多重文字阴影
? 6.2盒阴影
? 6.2.1内阴影
? 6.2.2多重阴影
? 6.3背景渐变
? 6.3.1线性背景渐变
?···分解线性渐变语法
? 6.3.2径向背景渐变
?···分解径向渐变语法
? 6.3.3重复渐变
? 6.4背景渐变图案
? 6.5CSS3的响应性
? 6.6组合使用CSS3属性
? 6.7多重背景图片
? 6.7.1背景图片大小
? 6.7.2背景图片位置
? 6.7.3背景属性的缩写语法
? 6.8更多CSS特性
? 6.9可缩放图标：响应式设计中的完美选择
? 6.10小结
第7章CSS3过渡、变形和动画
?7.1什么是CSS3过渡以及如何使用它
?7.1.1过渡相关的属性
?···1.过渡的简写语法
?···2.在不同时间段内过渡不同属性
?···3.理解过渡调速函数
?7.1.2响应式网站中的有趣过渡?7.2CSS3的2D变形
?我们能做哪些变形
?···1.scale
?···2.translate
?···3.rotate
?···4.skew
?···5.matrix
?···6.transform-origin属性?7.3尝试CSS3的3D变形
?7.3.1分析3D变形效果
?7.3.23D变形尚未成熟
?7.4CSS3动画效果
?组合使用CSS3变形和动画?7.5小结
第8章用HTML5和CSS3征服表单?8.1HTML5表单
?8.1.1理解HTML5表单中的元素
?8.1.2placeholder
?8.1.3required
?8.1.4autofocus
?8.1.5autocomplete
?8.1.6list（及对应的datalist元素）
?8.1.7HTML5的新输入类型
? 1.email
?···2.number
?···3.url
?···4.tel
?···5.search
? 6.pattern
?7.color
?8.1.8日期和时间输入类型
? 1.date
? 2.month
? 3.week
? 4.time
? 5.datetime和datetime-local
? 6.range
?8.2如何给不支持新特性的浏览器打补丁
?8.3使用CSS3美化HTML5表单
?针对表单的CSS3伪类选择器
?8.4小结
第9章解决跨浏览器问题
?9.1渐进增强与优雅降级
?现状
?9.2该不该修复老版本IE
?9.2.1统计数据（再看看世界的变化）
?9.2.2个人选择
?9.3前端的瑞士军刀：Modernizr
?9.3.1使用Modernizr辅助修正样式问题
?9.3.2使用Modernizr让老版本IE支持HTML5元素
?9.3.3给IE6、7、8追加min/max媒体查询功能
?9.3.4使用Modernizr按需加载资源
?9.4必要时将导航链接转换为下拉菜单
?9.5高分辨率设备（未来趋势）
?9.6小结
附录
?附录1：响应式Web设计（HTML5和CSS3）工具集
?附录2：响应式Web设计（HTML5和CSS3）范例网站?附录3：本书涉及的HTML5及CSS3标准索引
?附录4：本书提到的电影索引
1《义海倾情》Wyatt Earp：https://www.360docs.net/doc/a713727172.html,/subject/1293055/）。——译者注译者序
蒂姆·伯纳斯-李在1991年制作并发布了第一个网站，如今刚刚过去21个年头。在这21年里，
计算机和互联网快速发展，这个世界的面貌也日新月异。在这个过程中，网页设计从无到有，从简单渐至专业，从可有可无变为广受关注。网页设计方法也在跟随时代不断创新，从最初
简单的文字排版，到表格布局，再到DIV+CSS，直到现在广为流行的网格布局、流式布局等，设计师和开发者们一直致力于为全球网民提供更好的设计观感和使用体验。
iOS和Android的发布，掀起了移动互联网的浪潮，智能手机、平板电脑、智能家电等新设
备层出不穷，我们的世界变得更加精彩纷呈。但这却给网页设计带来了新的挑战，在面对形形色色的终端设备、千差万别的屏幕分辨率，以及良莠不齐的网络连接质量时，目前的设计方法显得力不从心。我们无法预料用户的设备和网络状况，更不可能为每种设备专门设计一套网站，那么在移动互联网时代，如何创新为用户提供更好的设计和体验呢？
2010年5月25日，伊桑·马科特发表在A List Apart上的一篇文章，为我们打开了思路。在这篇名为《Responsive Web Design》的文章中，伊桑·马科特将三种已有的技术整合在一起，
提出了响应式网页设计的概念，用以解决我们当前遇到的设计难题。响应式网页设计概念一经提出就大受欢迎（当然也有争议），很多设计师和开发者纷纷实践并完善这种理念。两年多的时间里，涌现出了越来越多的响应式网站，针对响应式设计的工具和资源也日渐丰富。截至目前，响应式设计是使用一套代码为各类设备提供良好设计效果和使用体验的最佳设计方法。
你肯定对响应式设计有所耳闻，也可能看过一些响应式设计的技巧或相关文章，但它们都零零散散不成体系，无法让你真正理解并掌握响应式设计，也无法指导你立即开始响应式设计的实践。这本书将会带你系统地学习响应式网页设计的方法论，书中涵盖了响应式设计的思
想、方法、工具、技巧、HTML5、CSS3、相关资源，以及针对老版本浏览器的兼容方案等
内容，并以实际案例循序渐进地讲解了如何创建一个优雅高效易于维护的响应式网站。希望这些正是你所需要的。
“得功有法，秉一应万”，这是太极拳修炼的目标，我想也可以作为响应式设计的目标。修炼好响应式设计这门功夫，能够让你安然自在，以一应万。元芳，潜心修炼吧！
感谢裕波、杨海玲老师及朱巍老师，让我有机会翻译本书。非常感谢图灵各位编辑的辛勤工作，尤其感谢李松峰老师的细心指导。另外要感谢图灵社区，我在这里受益匪浅。最后，感谢我的老婆，本书的翻译离不开她的支持、监督与参谋。
我在翻译本书时尽力保证信与达，雅则不敢奢望。翻译中的错误在所难免，欢迎广大读者指
正。如果对本书有任何意见、建议或想法，请发送邮件至wyqbailey@https://www.360docs.net/doc/a713727172.html,或反馈至图灵社区。
王永强2012年10月成都
前言
如果你想给自己的网站做一个单独的“手机版”，请三思而后行！响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提供最佳的浏览体验。
本书提供了一整套方法，用来将一个现有的固定宽度的网站设计变成响应式的。此外，本书应用HTML5和CSS3提供的最新最有用的技术，扩展了响应式网页设计的方法论，以便网站更简洁、更易于维护。本书还讲解了编写和发布代码、图片、文件的最佳实践。
只要你懂HTML和CSS，你就能制作响应式网站。
本书内容
第1章，HTML5、CSS3和响应式网页设计入门，定义了什么是响应式网页设计，展示了一些响应式设计的网站示例，重点强调了使用HTML5和CSS3的优势。
第2章，媒体查询：支持不同的视口，讲解了什么是媒体查询，如何实现媒体查询，以及如何针对设备能力匹配CSS样式，将其应用于任意设计。
第3章，拥抱流式布局，讲解了流式布局的优点，以及如何将一个现有的固定宽度设计轻松地转换为流式布局，怎样使用CSS框架快速搭建响应式网页。
第4章，响应式设计中的HTML5，探讨了使用HTML5技术的诸多好处，比如更简洁的代码、语义化标签、离线存储，以及无障碍网页应用辅助技术。
第5章，CSS3：选择器、字体和颜色模式，展示了CSS3选择器的强大威力，可以让你轻松地指定和改变任何元素。还讲解了通过@font-face声明来使用漂亮的网络字体，另外讲解了新的CSS3颜色模式如RGB(A)和HSL(A)。
第6章，用CSS3创造惊艳的美，展示了如何使用纯粹的CSS3代码实现文字阴影、盒阴影和渐变效果。还涵盖了如何使用多重背景图片，以及如何通过字体文件创建图标。
第7章，CSS3的过渡、变形和动画，讲解如何仅使用CSS3来创建和转换屏幕上的元素，并制作动画效果。
第8章，用HTML5和CSS3征服表单，阐述了在所有设备上（从最新的智能手机到桌面版浏览器）都能良好运行的跨浏览器表单开发技巧。
第9章，解决跨浏览器问题，讲解了如何保证老版本的Internet Explorer可响应，如何将一组链接修改成移动设备上的一个菜单，如何为高分辨率显示器提供不同内容，以及如何使用Modernizr框架分条件地加载资源文件。
准备工作
你必须对HTML和CSS很熟悉。有一点JavaScript基础会很有帮助。良好的电影品味也很有益处。
本书读者
你是否正在开发两套网站，一套给移动设备，一套给大显示器？又或者你已听说过“响应式网页设计”但却不确定如何将HTML5、CSS3和响应式设计融合在一起？如果是，那么本书可以让你在所有竞争对手之前，将你的网站提升到一个更高层次。
本书面向那些正在使用HTML4.01和CSS2.1开发固定宽度网站的网页设计师和开发人员，讲解了如何使用HTML5和CSS3制作可适应任意屏幕尺寸设备的响应式网站。
本书约定
本书中使用几种不同的文字样式来区分不同类型的信息，具体约定如下。
正文中的代码使用如下格式：
“HTML5接受宽松语法，例如这样的语句也是有效的。”
代码段使用如下格式：
当要专门强调代码块中的某一部分时，则对相关行或条目使用粗体格式：[编者注：网页格式无法实现此效果。]
#wrapper{margin-right:auto;margin-left:auto;width:96%;/*最外围的DIV*/
}
#header{margin-right:10px;margin-left:10px;width:97.9166667%;/*940÷960*/}
新术语，以及重要词汇也使用粗体。文中提到的那些菜单、对话框中的文字，会使用粗体或
WON N 大写来标注，如：“导航按钮不再做背景色切换，内容区的THESE SHOULD HAVE WO 按钮和侧边栏的详细信息按钮消失了，而字体也与设计文档相差甚远。”
！这个图标表示警告或重要提醒。
￥这个图标表示提示或技巧。
读者反馈
我们时刻欢迎你的反馈，以便了解你对本书的看法。你的宝贵意见有助于我们提升书籍的质量。
一般的阅读反馈，可直接发送电子邮件至feedback@https://www.360docs.net/doc/a713727172.html,，请在邮件标题中注明
书名。
如果你在某个领域内有专长且有兴趣编写相关书籍，请访问https://www.360docs.net/doc/a713727172.html,/authors查看作者指南。
客户支持
现在你已是Packt图书的尊贵读者了，我们有一系列的售后支持，保证你的消费物有所值。错误
尽管我们已经对书籍作了仔细校对以保证内容准确，但错误在所难免。如果在书中发现任何的文字或代码错误，非常欢迎你将这些错误提交给我们，这样可以帮助我们在后续版本中改正错误，避免其他读者产生不必要的误解。一旦发现错误，请登录
https://www.360docs.net/doc/a713727172.html,/support，选择书名，点击errata submission form（提交勘误）
链接，然后填写具体的错误信息即可。只要你提交的勘误通过验证，勘误信息就会上传到我们的网站，或者追加到已有勘误列表中，显示在该书的勘误页面。
盗版
对所有媒体来说，互联网盗版都是一个棘手的问题。Packt很重视版权保护。如果你在互联
网上发现我们公司出版物的任何非法复制品，请及时告知我们相关网址或网站名称，以便我们采取补救措施。
如果发现可疑盗版材料，请通过copyright@https://www.360docs.net/doc/a713727172.html,联系我们。对您帮助我们保护作者权益、确保我们持续提供高品质图书的行为表示敬意。
问题
如果你对本书有任何问题，请联系questions@https://www.360docs.net/doc/a713727172.html,，我们会尽力解决。
第1章HTML5、CSS3和响应式网页设计入门
直到最近，网站设计普遍还在使用固定宽度（如960像素），以期给所有终端用户带来较为
一致的浏览体验。这种固定宽度设计在笔记本电脑上显示刚刚好，而在高分辨率显示器上却会在两边多出些空白。
但现在有了智能手机。苹果公司的iPhone第一次带给我们真正意义上易用的手机上网体验，之后其他公司纷纷效仿。现在人们可以舒服地使用手机上网冲浪，不用再像过去那样需要有“挑圆片”[1]世界冠军一样的灵活拇指，才能在小屏幕上看看网页。此外，消费者在家中上网时优先使用小屏幕设备（如平板电脑、上网本）正成为趋势。一个不争的事实是，使用小屏幕设备上网的人数正在以前所未有的速度增长。与此同时，27英寸和30英寸的大显示器也在快速普及。上网设备之间的尺寸差距与日俱增。
[1]一种游戏，https://www.360docs.net/doc/a713727172.html,/wiki/Tiddlywinks。——译者注
幸运的是，面对不断发展的浏览器和上网设备，我们有可行的解决方案。采用HTML5和CSS3技术的响应式网页设计，可以使网站兼容多种设备和屏幕。而这种方法的最佳之处，在于不需要什么服务器端方案，也完全可以实现。
本章内容：
?支持小屏幕设备的重要性
?什么是移动网站设计
?什么是响应式网页设计
?优秀响应式网页实例赏析
?视口和屏幕的区别
?安装和使用修改视口的浏览器扩展程序
?使用HTML5编写更简洁的标记
?使用CSS3解决常见的设计问题
1.1为什么智能手机很重要（而老版的IE不再重要）
虽然统计数据一般仅用作粗略参考，但来自https://www.360docs.net/doc/a713727172.html,的统计数据却值得注意。从2010年7月到2011年7月的12个月中，全球手机浏览器的使用量从2.86%上涨至7.02%。Internet Explorer6的使用率则是从8.79%下降到3.42%。到2011年7月，Internet Explorer7的使用率也降到了5.45%。如果客户老是要求：“我们的网站必须兼容IE6和IE7！”你可以反驳说：“我们应该把精力花在更有价值的地方。”用手机上网的人比用台式机和笔记本中的IE6或IE7上网的人多多了。你可以听到全球前端开发工程师震耳欲聋的欢呼声！
越来越多的人使用小屏幕设备上网，这些设备上的浏览器在设计时都考虑到了如何显示好现有网站。手机浏览器会将一个标准网页缩小至与设备可视区域（标准技术术语叫做“视口”）恰好匹配。然后用户在自己感兴趣的内容区域上放大浏览。这样看起来已经挺好了，那作为前端设计师和工程师的我们，为什么还要在这上面继续优化呢？
在iPhone或Android手机上浏览的网页越多（如上图所示的那样），就越能深刻体会到为
什么我们还需要继续优化。为了看清楚页面内容，需要不停地放大、缩小页面，然后为了看到视口外的文字，再左、右拖动，结果一不小心点了一个链接，你说讨厌不讨厌？我们当然可以做得更好！
1.2响应式设计一定是最佳选择吗
如果预算充足且形势需要，做一个真正的“手机版”网站是首选。这样就可以基于用户的设备、位置、连接速度，以及包括技术特性在内的其他变量来提供不同的内容、设计和交互。举一个实际的例子，假设有一家比萨连锁店，它有一个标准版的网站和一个手机版网站，手机版
网站可以基于增强现实功能、用户当前GPS位置找到附近的比萨店。单独一个响应式设计
远远不能支撑这种解决方案。
然而，不是所有项目都要求如此完美。大多数情况下，根据视口大小为用户提供与之匹配的视觉效果还是优先选择。例如，针对大多数网站，虽然从服务器端请求的内容相同，但我们可以根据不同设备改变网页的显示方式。在小屏幕设备上，可能是将次要内容放在主体内容之下，或者最坏情况下将其直接隐藏；也可能是将导航按钮改造成便于手指操作，而不是只提供一些需要精确瞄准才能点击的玩意儿！字体大小也应该恰到好处，便于阅读，不再需要不停地在屏幕上拖来拖去。同样，在迎合小屏幕的同时，我们也不想降低笔记本和台式机用
户的浏览体验。既然我们意在兼容万物，那给那些配备1900像素甚至更大屏幕的用户提供
一点额外改进又有何不可呢？简而言之，我们需要那些能响应各种设备大小的完美设计。
1.3响应式网页设计的定义
响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑-马科特（Ethan Marcotte）提出。他在A List Apart发表了一篇开创性的文章，将三种已有的开发技巧（弹
性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。
上面仅列举了其中一部分！不过，正如马科特等人所说，真正的响应式设计方法不仅仅只是根据视口大小改变网页布局。相反，它是要从整体上颠覆我们当前设计网页的方法。以往我们先是针对桌面电脑进行固定宽度设计，然后将其缩小并针对小屏幕进行内容重排；现在我们应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕的设计和内容。
一句话概括响应式网页设计
如果要用一句话概括响应式网页设计，我觉得它是针对任意设备对网页内容进行完美布局的一种显示机制。相反，如果需要根据不同设备提供特定的内容和功能，那就需要一个真正的
十大响应式Web前端开发框架
网站设计如果单靠一个一个代码码出来效率就过于低下了，如果利用网上的一些资源，只需简单的几个步骤你就可创建出更具吸引力的设计，包括菜单、背景、动画、眉头、body等设计。响应式Web设计不仅能够适用于任何屏幕尺寸，还为用户带来更完美的体验，本文将分享十款最佳的响应式Web设计开发框架，助你大大提高工作效率。 Gumby Framework
Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。 Get UI Kit Get UI Kit是一款轻量级、模块化的前端框架，用于开发快四且强大的 Web界面。 Foundation
Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、标签等。 Semantic
UI是Web的灵魂！Semantic是为攻城师而制作的可复用的开源前端框架。 提供各种UI组件，使得开发更加直观、易于理解。 52Framework
52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架， 可在所有主流浏览器上运行。 PureCSS
Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。 Responsablecss
基于HTML5的响应式Web页面重组适配技术研究_蒋凌燕
计算机与现代化 2015年第2期 JISUANJI YU XIANDAIHUA 总第234期 文章编号：1006- 2475（2015）02-0007-04收稿日期：2014-11-14作者简介：蒋凌燕（1979-），女，江苏南京人，南京工业职业技术学院计算机与软件学院讲师，硕士，研究方向：Web 开发技术； 查英华，副教授，硕士，研究方向：移动应用开发技术。 基于HTML5的响应式Web 页面重组适配技术研究 蒋凌燕，查英华 （南京工业职业技术学院计算机与软件学院，江苏南京210046） 摘要：在网页浏览和网站访问使用上，移动终端与PC 机终端相比，有显示屏幕大小不统一，页面布局不适应，噪声信息较多等问题，网络上海量的网站在移动终端访问时需将网页信息进行适配和重组。HTML5标准提供的新特性新标签可以更好地适应现今多终端访问的需求，采用响应式原则设计的页面在移动终端访问时也能提供给用户更好的服务和体验。本文提出一种方法，将已有的网站和网页通过前台框架技术进行Web 页面的重组和适配，从而转换成基于HTML5新标准的响应式页面，实现了基于HTML5的响应式Web 页面重组。网站可以更好地适应多终端访问，为用户提供更好的服务。关键词：页面重组；响应式；前台框架；HTML5中图分类号：TP393．09 文献标识码：A doi ：10．3969/j．issn．1006-2475．2015．02．002 Ｒecombination and Adaptive Technology of Ｒesponsive Web Pages Based on HTML5 JIANG Ling-yan ，ZHA Ying-hua （College of Computer and Software ，Nanjing Institute of Industry Technology ，Nanjing 210046，China ） Abstract ：In webpage browsing and Web accessing ，through the comparison between mobile terminal and PC ，it ’s found that the display screen size is not uniform ，the layout of the page does not adapt ，and the noise information is too great．So a great quanti-ty of website on network is need to transform and recombine the webpage information adaptively when accessed by the mobile ter-minal．The new label and features provided by HTML5can better adapt to the multi-terminal access needs ，the type of response page design principles in the mobile terminal access can also provide users with better service and experience．This paper presents a way which can translate existing website and webpage into HTML5-based response page by using framework of foreground tech-nology to recombine the webpage information adaptively．The website can be better adapted to the environment of multi-terminal access ，provide better service for user． Key words ：page recombination ；responsive ；framework of foreground ；HTML5 0引言 目前，移动互联网已经成为最大的信息消费市场、最活跃的创新领域、最强的ICT 产业驱动力 量———2013年全球移动业务收入达到1．6万亿美元，相当于全球GDP 的2．28%，全球智能手机出货量近10亿部，达到PC 的3倍；移动互联网重构了互联网服务的模式与生态，全球应用程序下载次数累计超 过5000亿［1］ 。 移动终端与个人电脑终端相比， 可视界面偏小，通常为几分之一，互联网上海量为个人电脑终端所设计的各种Web 系统在移动终端上显示时内容过多，网页布局和用户对网站功能的使用方面的设计也是针对大屏幕的，从适合个人电脑终端的Web 系统向适合 移动终端的系统上迁移时需要进行页面提取和重组。 1 页面重组技术 1．1 现状 Web 页面重组技术通过对现有网页信息的提 取、分离、转换、组合，能够提高网页网站的适应性，在多终端访问的环境下给用户以更好的体验，满足用户信息交流，更好体现网络服务的便捷性。 页面重组技术将原始页面经过重组处理，生成适合在移动终端显示的新页面。根据页面重组处理流程，页面重组技术主要包括页面信息提取技术和页面信息组合技术。页面信息提取技术主要通过对原始页面结构和内容2个方面进行提取。页面信息组合技术将传递来的内容块按照一定的规则进行组织显示。
响应式Web设计在移动终端的实践探索
计算机时代2018年第5期 0引言 我国移动互联网市场快速扩展，移动互联网设备不断更新，在这样的环境下，移动互联网的网站设计必须紧跟移动设备的硬件技术水平，完善网站与移动终端的贴合度。于是，如何将网站在不同的设备上展示给用户就是需要思考的问题。在理想状态下Web 设计可以根据用户的不同需求以及显示屏幕的不同分辨率展示不同的版本，为用户提供最佳的用户浏览体验[1]。但是显然，面对不断更新的硬件设备，Web的设计需要不断的更新，无疑会增加各项工作的成本。结合现有的技术，采取响应式Web设计可以很好地应对这一问题。在Web页面的设计和开发中，针对不同客户的需求，在命令网站针对移动终端设备上的硬件性能对自身的布局进行设计，通过这样的方式，移动终端可以得到最佳的Web展示。在响应式网页的设计中，主要涉及整合媒体查询、弹性视觉媒体和流动布局，通过以上的技术支持可以很好的解决不同终端设备的适应性问题。 1移动互联网和智能移动终端的发展现状 在现阶段的技术实力和市场需求的转变中，在网页设计领域正发生着不断的变化，在过去的一段时间里，PC作为主要展示网络页面的设备，在网页设计上可以主要考虑内容的因素，设备种类相对较少，网页设计过程中需要较少的设计方式。但随着移动互联网终端的发展，多种尺寸的屏幕，不同大小的分辨率，适当的Web设计成为市场的需求。 设计人员根据设计的理论提出了响应式Web的 DOI:10.16644/https://www.360docs.net/doc/a713727172.html,33-1094/tp.2018.05.008 响应式Web设计在移动终端的实践探索 郭飞军 (浙江国际海运职业技术学院，浙江舟山316021) 摘要：随着移动互联网的发展，Web设计也发生了很大的变化。目前的网页设计已无法与移动终端的硬件设计相适应，不同网页在不同设备上使用的兼容性问题逐渐暴露出来。这就要求网页能够自动切换分辨率、改变图片尺寸及相关脚本功能等，来适应不同设备。响应式Web设计理论应运而生，旨在解决现阶段网页设计在移动客户端上使用的问题。 通过Web设计的关键技术使网站能够动态地适应各类用户终端设备，从而满足各类用户的需求。 关键词：响应式Web设计；移动终端；流式布局；媒体查询 中图分类号：TN911.22文献标志码：A文章编号：1006-8228(2018)05-29-03 The practical exploration of the responsive Web design in mobile terminal Guo Feijun （Zhejiang International Maritime College,Zhoushan,Zhejiang316021,China） Abstract：With the development of mobile Internet,great changes have been taken place in the Web design.The design of webpage is no longer compatible with the hardware design of mobile terminal.The compatibility problem of displaying different web pages on different devices is gradually exposed,it is required that the web page can automatically switch the resolution, change the picture size and the related script functions to adapt to different devices.The theory of responsive Web design came into being,which aims to solve the problem of compatibility at present.The key technology of Web design enables the web site to dynamically adapt to all types of user terminal devices to meet the needs of all types of users. Key words：responsive Web design；mobile terminal；flow layout；media query ··29
浅谈响应式网站论文
浅谈响应式网页设计 [摘要]经过十多年的快速发展，中国的互联网如今已经日趋成熟。随着3G, 4G的发展 和移动通信及WEB2. 0技术的提升以及近年来各种移动智能设备的兴起，移动互联网 也即将会步入高速发展时期，成为一种大势所趋。这一来就使中国互联网的发展变得 更加丰富、多元化趋势。越来越多的用户拥有多种移动设备，像智能手机、平板电脑、智能手表等，在现今的大环境下移动设备正在普及并且正在逐渐超过PC设备，面对市场上移动设备的不断增多，同时伴随着各种设备屏幕的分辨率、尺寸和型号的越来越多，如何能够在不同屏幕、不同系统平台等环境下保持网页的一致性，满足用户的一 致体验这将成为了整个网页设计行业的一个新挑战。 据非官方调查，移动设备正在逐渐超过PC设备，如果数据属实那么无可置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能 给公司企业带来的大概也只有负面的影响，所以为了避免这种情况能够使所有利用移 动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择. 【关键词】:设备响应式设计;Web设计;移动终端;动态网页 一、晌应式网页设计《Responsive Web design)的理念 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是ipad，我们的页面都 应该能够自动切换分辨率、图片尺寸及相关脚本功能等.以适应不同设备;换句话说，页面应该有能力去自动响应用户的设备环魂。响应式网页设计就是一个网站能够兼容多 个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的 新设备做专门的版本设计和开发了。 其实这个是一个设计问题，既然是设计的问题，这里就会涉及到很多层面的角色，包括交互设计师，视觉设计师，前端工程师，后台开发工程师。交互设计师，要满足 各自不同分辨率和设备的页面布局展现方式。而视觉设计师，则要考虑到页面性能和 移动端带宽问肠，权衡下页面的酷炫效果和视觉色彩的运用。而前端和后台开发工程师，则要完成满足视觉需求和交互功能.更要考虑到页面加载性能和消耗带宽问题，更重要的是移动端安全性能方面!
基于HTML5的响应式网站的设计与实现(论文)正文
摘要 随着网络的发展和普及，各类建站技术的更新与运用，现在搭建一个网站的时间和成本越来越低，使得企业官方网站得到了极大的发展。从早期简单的网页展示，到后来的营销型网站，全网营销型网站，以及目前最新最主流的响应式网站。基于HTML5的响应式网站能够自动适应屏幕大小，实现多终端覆盖，设计高端，丰富的特效让页面展示更精美。 HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如Adobe Flash、Microsoft Silverlight，与Oracle Java FX的需求，并且提供更多能有效增强网络应用的标准集。HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。 本课题结合HTML5技术和eclipse开发工具，MySQL Server 作为数据库，实现了企业响应式网站及其管理，使得企业官网的展示更精美，管理更便捷。 关键词：HTML5；CSS3；JavaScript；MySQL Server；响应式网站
ABSTRACT With the development of network and popularization, the updating and use of all kinds of web technology, now time and cost of building a website has become more and more low, makes the enterprise's official website got great development. From the early simple web pages, to later marketing type site, the entire network marketing type site, and the reactive sites of the latest most mainstream. Based on the response of the HTML5 responsive website can automatically adapt to screen size, realize the end cover, high-end design, rich in specific page to show more elegant. HTML5 is HTML next major revision, now is still in the stage of development. Generalized when asked about it actually means, including HTML, CSS, and JavaScript, a set of technology combination. It hopes to be able to reduce the browser plug-in to need the richness of network application service RIA, such as Adobe Flash, Microsoft Silverlight, and the demand of the Oracle Java FX, and can provide more effective enhance the standard set of network applications. HTML5 is the emerging Web development technology, has good semantic labels, match the latestCSS3 can show a unique display effect. This topic combines the technique of HTML5 and the eclipse development tools, MySQL as the database Server, realize the reactive sites and its management, make enterprise website to show more elegant, more convenient management. Key words:HTML5; CSS3; JavaScript; MySQL Server; Reactive sites
响应式web网站设计制作方法
在研究响应式的时候，记录了一些感想，分享出来，抛砖引玉，希望可以和大家一起讨论。总结下来，响应式比之前想象的要复杂得多。 1. ie9以下（不包括ie9）采用ie条件注释，为ie8以及一下单独开一个样式文件 2. 一个模块的mq样式整体放在这个模块的样式的之后，符合层叠逻辑，也同时以免被层叠。 3. 祈求在一个相应点上同时做变化几乎是不可能的，因为版式中间的变化，无论是视觉还是具体的编码人员不可能掌握所有细节。 4. 流体布局很关键，%视父级为参照物，这一点虽然很多人都知道，但是实际做的时候却最容易被忽略。 5. 清除浮动也很重要，切记。 6. 如果你希望边框、边距（内、外）也在100%的范围内，直接设置width:auto就好了，不要给予希望在新的css3属性上，也不要寄希望在-webkit上，-webkit-很容易就会变成下一个ie6了。 7. 合理的嵌套更加健壮，用一个包装元素来替代设置当前元素margin或者padding。举例，假如有A和B两个元素，width是40%，maring-right是10%，这样很容易在搜索浏览器的时候篡位，所以用一个包装元素C去分别包裹A和B，然给给C设置50%，A和B分别设置为80%。这样就是合理且健壮的嵌套了。 8. 两行两列这种设计，由于流体布局和字数的不同，所以为每一行添加一个包装元素，更加健壮。也就是说，先做两行，再在每一行里做两列。 9. 不要奢望在在每一个像素的宽度上不会出现超出预期的表现，因为没有任何人知道页面在每一个像素宽度时候的表现的样子，页面越负责可预期的就越不准确。所以mq可能真的是“非预期数值”（预期数值指代在设计和实现之前约定的响应点） 10. 相同区间的mq和mq会层叠，全局的样式也会和mq中的样式层叠，所以属性尽量不要写成缩写。以减少忘记的风险。 11. 图片的自适应处理不容易，特别是有边框的，如果正常条件（没有利用mq来约束）下设置了宽和高，在另外一个mq下，仅仅设置一个属性是不行的，还是那句话，mq不是二选一（除非是两个不同的mq区间），而是层叠！！ 12. 如果水平列表的两端的元素两端对齐，以四个元素为例，那么除了前三个预留左边距，最后一个为零；或者第一个右边据为0；后三个有右边距以外。可以采用第一个左侧有，最后一个右侧有，中间两个左右偏移边距来做，短的一面为边距除以空白数，比如4个列表项，边距为40,则40除以3。好处么？就是可以保证每一个外包装为通栏的25%。 13. 四个25%，两个50% 没关系，但是50% 25% 25%就可能会掉下去最后一个，所以24.99，22.49有时还会相差1~2像素。 14. 如果版式变化不大，那么从大到小的写mq，不必写一个区间，只写最大值即可，这样一层一层的继承，小尺寸继承大尺寸，另外，不用过分担心选择器本身权重的问题，mq会提高其优先级。 15. 像导航和版权这种在pc、pad、phone截然不同的版式。mq，就写区间。这样在区间外就等于这些dom毫无样式，这样就不比担心由继承引发的覆盖、优先级、重写以及未知问题。减少了属性的重写，提高了效率、降低了修改成本。其实就是等于一个dom，为不同
响应式Web设计总结
响应式网页设计三步走 第一步. Meta 标签 (查看demo) 为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在
里面 1. 1. 第二步. HTML 结构 这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。 第三步. Media Queries CSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。如果屏幕窗口小于980px，下面的规则就生效。在这里，我设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。 如果屏幕窗口小于700px，定义 #content 和 #sidebar 为自适应宽度，并移除它的浮动属性，这样它会全屏显示。 如果屏幕窗口小于480px (移动设备的屏幕)，设置#header 高为自适应，把h1字体设置为24px，并且隐藏#sidebar。
这些media query，你可以写很多。在这个demo，我只写了三个。media query的目的是应用不同 的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件，也可以写在不同的文件。 通过CSS3 Media Query实现响应式Web设计 概述 我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽 于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的 宽度设置由“固定”方式改为“液态”，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可 视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置 于主内容部分的下方，整个页面变为单栏布局。 HTML代码 我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些结构，包括页头、主要内容部分、侧边栏和页脚： 1.