ＥＬＥＣＴＲＯＮＩＣＳ　ＷＯＲＬＤ・探索与观察　基于ＨＴＭＬ５技术的响应式Ｗｅｂ设计浅析　中国东方电气集团有限公司　程荣赞　【摘要】随着互联网技术的飞速发展，为适应ｌ－：ｌ益增长的多元化终端设备浏览需求，使用户在不同阅读终端上都能有良好的使用感受，本文　浅析了一种高效的解决方案：基于ＨＴＭＬ５技术的响应式Ｗｅｂ设计．．通过对媒体查询、流体布局、弹性图片等Ｗｅｂ设计技术的组合和提升　实　现任意阅读终端对网页布局及内容都能良好地呈现，是未来Ｗｃ１）设计技术发展的大势所趋　ｊ　【关键词】响应式；ＨＴＭＬ５；Ｗｅｂ设计　

０引言　随着１Ｔｆ￣＇ｉ息技术和移动互联嘲的Ｉ｛ｌ速发展．移动阅读终端，如　平扳电嘧、智能于机等越来越普及，Ｈ型号各异，而备类桌面计锌　机、电视　幕规格也越来越多　化，主流设舒的概念越来越被淡　化。让网站　最兼容各类设备，适应各种分辨率的屏幕，确保　良好的用厂｛体验，是Ｗｅｂ前端ｌ』ｆ发工程师必须要解决的重要问题。　响应式Ｗｅｂ波汁　此应运而　卜，一个网站能够兼容多个终端，而不　是为每个终端都做一个特定的版本，就像具备自主辨识能力一样，　确保用户无论在何种阅读环境卜，都能得到良好的体验感。　１　响应式Ｗｅｂ设计的概念　独立Ｗｅｂ　汁帅伊森马科特（Ｅｔｈａｎ　Ｍａｒｃｏｔｔｅ）　２Ｏ１Ｏ年首次　提出了响心式Ｗｅｂ设计’（Ｒｅｓｐｏｎｓｉｖｅ　Ｗｅｂ　Ｄｅｓｉｇｎ）概念。他认为，　真正的响心式Ｗｅｂ设计方法　仪仅是简单的根据可视区域大小来改　变网页布埘，而是要从整体Ｌ颠覆当前的网页设计方法，是针对仟　意阅读终端的　页内容进行究荚布局的一种显尔机制。意　，一个　响应式州站＝智能于机端网站＋　板电脑端网站＋桌　电脑端网站＋　其他显示终端　ｉ。　０　—　≯　图１晌应式布局示例　２响应式Ｗｅｂ设计的优缺点　罾靛手机屏覃　｛　一　）　ｌ　ｌ　—　｝＝＝＝　；　｝钿自■　■“Ｍ　ｊ　ｌ斓　｛　｛解融餮罐辩ｌ　２．１响应式Ｗｅｂ设计的优点显而易见　（１）浏览器兼容性良好，用户体验友好。传统Ｗｅｂ设计通常　只适用于某些特定规格的设备，如果新设备的屏幕分辨率变化较　大，则往往无法兼容。而开发新的版本又需要更多的时问成本与人　工成本。响应式Ｗｅｂ设计则仃¨玫地解决了这个问题。响应式网站可　以根据不　终端设训、不同』珲幕尺寸和不同应川环境，自动调整页　面布局、腱尔内容、图文大，Ｊ、，提供最符合人体视觉习惯的视觉展　示效果，刚，’体验十分友好。　（２）降低设计丌发、运营维护成本。传统Ｗｅｂ没计模式需要　对桌面电脑削页、平板电脑网页、智能手机网页分别进行单独设　计与开发，一　作量巨大，而响应式Ｗｅｂ设计只需设计两套设计效果　图，桌面电脑端与平板电脑端可以共用…套，智能手机端单独使用　一套；从前端开发角度说，不再需要分别开发曼套完全不一样的页　面代码，只需要根据临界点为不同终端开发三套不同的ＣＳＳ样式；　从后期维护角度来说，操作灵活．响应式Ｗｅｂ设汁足针对　瓶的，　可以只对必要的页面进行改动，其他页面不受影响，因此不再需要　分别维护电脑页面、　板页面、手机贞面，只需维护一个页面即　可，极大地节约了人工成本与时间成本。　２Ｉ２与此同时。响应式Ｗｅｂ设计也有自己的局限性　（１）对％ｗｅｂｋｉｔ内核的老版本ＩＥ浏览器兼容性较差　￣ｗｅｂｋｉｔ　内核的老版本ＩＥ浏览器（如ＩＥ６、ＩＥ７、ＩＥ８）无法访问响应式网　页，但由于这止匕老版本ＩＥ浏览器本身已有很多问题，往现代　联网　环境中己建议停用。　（２）页面Ⅱ向应速度可能会变慢。由于访问响应式贝两时会剧　时Ｆ载多套ＣＳＳ样式代码，如，刚手机访问时，　能同时下载桌面　电脑、平板电脑的样式代码，导致网页文件变大，影响加载速度。　不过ＣＳＳ样式代码占用内存丰｝Ｉ对图片来说不算大，如果前端程序开　发优化得当，基本不会影响网站加载速度。　在当今互联网时代的基础设施和技术条件下，响应式Ｗｅｂ设计　的优点非常突出，缺点已经显得瑕不掩瑜，ｎ向应式设计必定是未来　发展趋势。　

３基于ＨＴＭＬ５技术的响应式Ｗｅｂ设计实现　３．１　ＨＴＭＬ５技术的优势　ＨＴＭＬ５由万维刚联盟（Ｗ３Ｃ）于２０１４年１０月发　ｉ，足指包括　ＨＴＭＬ、ＣＳＳ和Ｊａｖａｓｃｒｉｐｔ在内的一套技术组合，¨前夫部分浏览器　已经支持ＨＴＭＬ５技术。ＨＴＭＬ５强化了Ｗｅｂ网页的表现性能，且追　加ｒ本地数据库等Ｗｅｂ应用功能。　相较传统的Ｗｅｂ网贝开发技术，ＨＴＭＬ５拥宵着无可比拟的优　势。ＨＴＭ［　５技术的成熟与革新对响应式Ｗｅｂ设讨的发展起剑了至　关最要的作刖。任创建页面时．ＨＴＭＬ５强调简化标签，仪链接页　面必需的ＣＳＳ、ＪａｖａＳｃｒｉｐｔ和图片文件。ＨＴＭＬ５也可以住表　提交　等基本网页交互场景中对用户做出反馈，通过创建更为简洁、高　效的代码，很大程度上减少代码冗余，提高设备运行效率。较之　ＨＴＭＬ４．０．１，ＨＴＭＬ５做出了极大的改进，提供了更多、更加语义　化的新特性。ＣＳＳ３的媒体查咖更是响应式设计不可或缺的组成部　分。ＨＴＭＬ５具有较好的可移植性．适用于多个操作系统干Ｉ】主流浏　览器，节省开发团队的时间成本　人　成本。　３．２响应式Ｗｅｂ设计基本规则　响应式页面殴计的基本规则：　（１）内容区块可伸缩：内容　块的在一定程度ｊ二能够自动调　整，以确保填满整个页面；　（２）内容　块可调整位置：当页面　寸变动车立Ｊ（时，能够减　少或增加布局的列数；　（３）边距能适应页面尺寸：到页面尺　发　｝ｉ更大变化时，区　块的边距也应该变化；　（４）图片能适应比例变化：对于常见的宽度调整，图　在隐　去两侧部分时，依旧保持美观可用：　（５）内容能自动隐藏或部分鼎示：如在电腑　＾示的火段描　述文本，在手机上就只少量显示或全部隐藏：　（６）导航和菜单能自动折叠：展开还是收起，应该根据页面　尺寸来判断。　

电早世界　－７９・　ＥＬＥＣＴＲ０ＮＩＣＳ　Ｗ０ＲＬＤ・朔　葵　琴露　察　３．３响应式Ｗｅｂ设计实现方法　（１）媒体查询与流体布局　ＣＳＳ３中的媒体查询（Ｍｅｄｉａ　Ｑｕｅｒｙ）是实现响应式页面设计的　关键之一，它根据分辨率宽度的变化来调整页面布局结构。但仅使　用媒体查询来调整页面范围的话，中间没有经过平滑过渡，变化较　突兀。媒体查询与流体布局相结合是一种很好的解决方式。　以父级容器宽度为固定９６０ｐｘ的页面示例。页面的主要布局　结构用更加语义化的ＨＴＭＬ５标签来实现，包括页头、主要内容部　分、侧边栏和页脚。　对桌面电脑而言，９６０ｐｘ适用于任何宽于１０２４像素的分辨率。　通过媒体查询来监测宽度小于９６０ｐｘ的屏幕分辨率，并设置流体布　局宽度，意即布局元素的宽度可随浏览器窗口的尺寸变化进行调　整。当可视部分的宽度进一步减ｄ＂￣１６５０ｐｘ下时，主要内容部分　的容器宽度会增大至全屏，而侧边栏将被置于主内容部分的下方，　整个页面变为单栏布局。　当浏览器可视区域宽度大于６５０ｐｘｄ￣于９６０ｐｘ时，媒体查询与　流体布局相结合：将ｐａｇｅｗｒａｐ的宽度设置为９５％；将ｃｏｎｔｅｎｔ的宽度　设置为６０％；将ｓｉｄｅｂａｒ的宽度设置为３０％。当浏览器可视部分宽度　小于６５０ｐｘ时，布局采用单栏方式：将ｈｅａｄｅｒ的高度设置为ａｕｔｏ；将　ｍａｉｎ．ｎａｖ、ｓｉｔｅ—ｌｏｇｏ、ｓｉｔｅ．ｄｅｓｃｒｉｐｔｉｏｎ的定位设置为ｓｔａｔｉｃ；将ｃｏｎｔｅｎｔ　和ｓｉｄｅｂａｒ的宽度设置为ａｕｔｏ，并取消ｆｌｏａｔ设置。当浏览器可视部分　宽度小于４８Ｏｐｘ时，禁用ｈｔｍｌ节点的字号自动调整。　需注意的是，对于那些尚不支持媒体查询的浏览器，需在页面　中调用ｃｓｓ３　ｍｅｄｉａｑｕｅｒｉｅｓ．ｊｓ。　（２）弹性图片与文字　使用ＣＳＳ３中的ｍａｘ．ｗｉｄｔｈ和ｈｅｉｇｈｔ：ａｕｔｏ来实现图片弹性化。如设　置ｉｍｇ｛ｍａｘ．ｗｉｄｔｈ：５０％；ｈｅｉｇｈｔ：ａｕｔｏ；｝，可以使图片自动缩放到与其容　器按５０％的比例匹配。图片本身的尺寸需比其显示尺寸大，以保证　渲染效果。最好给弹性图片加一个阈值，如一张图片的实际宽度为　１００ｐｘ，则可以设置ｉｍｇ｛ｗｉｄｔｈ：５０％；ｍａｘ—ｗｉｄｔｈ：１００ｐｘ；｝，这样就可以　保证图片的自由缩放，而且也不会超出正常显示的范围。　为实现文字的自适应缩放，使用ｅｍ替换ｐｘ。ｅｍ值是相对其父　级元素的字体大小而言的。公式为“目标元素尺寸÷父级元素尺寸　

＝百分比尺寸”，可将文字的绝对值尺寸转换为相对值尺寸。　

４结语　随着互联网技术的飞速发展，阅读终端设备越来越多元化，相　应的屏幕尺寸千差万别。如何能够使用户在不同阅读终端上都能有　良好的视觉体验，是前端开发工程师不得不面对的重要课题。响应　式Ｗｅｂ设计方式提供了一种有效的解决方案，通过对Ｗｅｂ设计技术　的组合和提升，实现了任意阅读终端对网页布局及内容都能良好地　呈现，是未来Ｗｅｂ设计技术发展的必然趋势。　

参考文献　【１］Ｅｔｈａｎ　Ｍａｒｃｏｔｔｅ．Ｋｅｓｐｏｎｓｉｖｅ　Ｗｅｂ　Ｄｅｓｉｇｎ［ＥＢ／Ｏ　Ｌ】．ｈｔｔｐ：／／ｗｗｗ．　ａｌｉｓａｐａｒｔ．ｃｏｍ／ａｒｔｉｃｌｅｓ／ｒｅｓｐｏｎｓｉｖｅ—ｗｅｂ—ｄｅｓｉｇｎ／．２０１０—０５—２５．　【２］Ｍｉｃｋｌｅｙ　Ｇｉｌｌｅｎｗａｔｅｒ．Ｆｌｅｘｉｂｌｅ　Ｗｅｂ　Ｄｅｓｉｇｎ：Ｃｒｅａｔｉｎｇ　Ｌｉｑｕｉｄ　ａｎｄ　Ｅｌａｓｔｉｃ　Ｌａｙｏｕ￣ｗｉｔｈ　ＣＳＳ［Ｍ］．ＵＳＡ：Ｎｅｗ　Ｒｉｄｅｒｓ，２００９：２８５—３１２．　【３］Ｆｒａｉｎ　Ｂ．Ｒｅｓｐｏｎｓｉｖｅ　Ｗｅｂ　Ｄｅｓｉｇｎ　ｗｉｔｈ　ＨＴＭＬ５　ａｎｄ　ＣＳＳ３［Ｍ］．　Ｂｉｒｍｉｎｇｈａｍ：Ｐａｃｋｔ　Ｐｕｂｈｓｈｉｎｇ，２０１２：１０—１１．　【４】张树明．基于响应式Ｗｅｂ＇￣－计的网页模板的设计与实现Ｕ］计　算机与现代化，２０１３，１（６）：１２５—１２７．　【５】熊瑞英，王宁．响应式Ｗｅｂｉ￣计Ⅱ１．科技创新导报，２０１５，１２（２６）：６４—６５．　

作者简介：　程荣贽（１９８４一），四川德阳人，硕士研究生，现就职于中国　东方电气集团有限公司。　

（上接第７８页）　ｗｈｉｌｅ（１）　（ｉｆ【ｂｕｔｔ０ｎ一０）　｛ｄｅｌａｙ（１００）；　ｉｆｂｕａｏｎ￣０）　ｆ　ｉ”；　ｉｆｉ＜９９）　｛ＰＯ＝ｓｅｇ７［ｉ／ｌＯ］；　Ｐ２：ｓｅｇ７［ｉ％１０】　）　ｅｌｓｅ　ｉ＝Ｏ：　ｊ　｝　ｄｅｌａｙ（３０００）；　｝　ｄｅｌａｙ（）函数为延时子程序，主要用于控制数码管显示的频率。　共阴极数码管的数字显示值被保存在一个数组当中：　ｓｅｇ７［ＩＯ］＝｛Ｏｘ３￣Ｏｘ０６，０ｘ５ｂ，０ｘ４￣０ｘ６６，０ｘ６ｄ，０ｘ７ｄ，０ｘ０７，Ｏｘ７￣Ｏｘ６￣。　在Ｐｒｏｔｅｕｓ软件中将Ｋｅｉｌ软件编译生成的ＨＥＸ文件通过设定参数　的方式配置在单片机当中，启动仿真操作，可以验证单片机程序设　计的正确性。　相对于实验设备的硬件电路不容易修改，且硬件电路修改失误　容易造成实验失败而无法进行下去的缺点，软件仿真具有明显的优　势。学生可以任意修改电路，例如可以选择不同的ＩＯ接口作为输入　或者输出接口，比较Ｐ０￣Ｐ３接口的使用差异。学生也可以选择调　整单片机时钟工作频率，或者修改延时程序循环计数的范围，或者　通过调用单片机内部定时器中断实现精确延时等不同设计手段，再　・８０・电子世拜　运行仿真器，即可得到数码管不同的显示结果。通过这种方式可以　明显缩短单片机设计和调试的时间，学生通过分析和比较运行的结　果，也可以更快更好的掌握单片机所学的知识点。　Ｐｒｏｔｅｕｓ软件中提供了丰富的仿真器件资源库，学生可以在掌握　基本应用的基础上，完成进一步的拓展训练。通过搭建更为复杂的　电路，拓宽了学生的知识领域，使学生的应用能力和创新能力得到　进一步提高。　４结论　在单片机课程教学过程中，采用Ｋｅｉｌ；￣Ｐｒｏｔｅｕｓ软件进行单片机　仿真，学生的学习兴趣显著提高。学生通过设计电路、软件编程　和模拟仿真对单片机的应用有了更加直观和深刻的认识，达到了事　半功倍的效果。同时，相对于硬件设备的投入、消耗和维护，利用　软件仿真性价比更高，使用更加灵活，学生在课余时间没有实验设　备的环境下也可以通过仿真进行学习和训练。在教学实践过程中，　通过Ｋｅｉｌ和Ｐｒｏｔｅｕｓ软件的配合使用，学生的单片机应用能力明显提　高，教学效果显著，证明了在单片机课程学习中运用这种教学方法　和手段是合理和行之有效的。　参考文献　【１】陈忠平．基于Ｐｒｏｔｅｕｓ的５１系列单片机设计与仿真（第２版）【Ｍ】．北　京：电子工业出版社，２０１２．　［２】徐广振，刘小莉．单片机技术应用项目化教程（ｃ语言版）【Ｍ】．北　京：电子工业出版社，２０１６．　【３】邓柳，陈卉．Ｃ５１单片机项目设计实践教程（第２版）『Ｍ】．北京：人　民邮电出版社．２０１５．