响应式网页设计案例实现与分析

信息与电脑2018年第6期China Computer&Communication计算机工程应用技术响应式网页设计案例实现与分析徐　健（私立华联学院 计算机科学系，广东 广州　510663）摘　要：响应式网页设计（简称RWD），基于流动布局（Fluid Grid）技术，有效解决了跨平台浏览尺寸不符的问题，得到最佳的显示效果。笔者详细论述了响应式网页设计的概念、设计思想以及相关技术，最后对案例进行了分析，简单介绍了设计以及制作响应式网页方面的内容，希望该研究可以对相关从业人员有一定的帮助。关键词：网页案例；网页制作；网页分析；响应式网页设计中图分类号：TP393.092　　文献标识码：A　　文章编号：1003-9767（2018）06-013-03Case Realization and Analysis of Response Web DesignXu JianAbstract: Response Web Design (RWD), based on Fluid Grid technology, effectively solves the problem of cross platform (Department of Computer Science, Private Hualian College, Guangzhou Guangdong 510663, China)browsing size, and gets the best display effect. The author expounds the concept, design idea and related technology of response web design in detail. Finally, the author analyzes the case and briefly introduces the design and production of response web pages. It is hoped that the research can help the relevant practitioners.Key words: webpage case; web page making; web page analysis; response web design本文通过实际案例，详细论述响应式网页的设计及其实行开发时，按照从小屏幕向大屏幕的顺序进行。通过小屏幕现流程，希望可以对网页前端的开发人员有一定的借鉴作用。浏览网页时，因其显示的空间比较小，在表现上可以有一定１　响应式网页设计概述程度的简化。而如果屏幕比较大，那么网页表现效果就会更加丰富。响应式网页能够在各种设备中展现出不一样的布局。1.1　概念在设计网页布局的过程中，比较有效的一种方法就是绘制断响应式网页设计[1]（Responsive Web Design，RWD）， 点图。这一断点图具体的内容为：屏幕尺寸不大于640像素指的就是对页面进行设计和开发的工作，在设计时必须要基时，显示出来的是单列布局；屏幕尺寸大于640像素但是小于用户的行为与使用的设备环境，例如，使用的平台、屏幕于960像素时，显示出来的是双列布局；屏幕尺寸大于960尺寸等内容，按照实际情况进行调整。无论用户采用哪种浏像素的情况下，显示出来的为三列布局。依照上文“移动优先、览设备，比如，iPad、电脑或者是手机，都可以浏览页面，渐进增强”的设计思想，按照单列布局、双列布局以及三列并且都能够自动调整为适合本设备的分辨率和尺寸，从而提布局的方式进行制作。首先通过DIV+CSS实现响应式布局，升用户的浏览体验。之后在页面当中添加详细的内容，最后对页面进行美化。1.2　设计思想1.3　相关技术利用响应式网页进行开发时，遵从“移动优先、渐进增强”响应式网页技术开发涉及的方面比较多，需要学习的东的设计思想。“移动优先”指的是因为移动设备的尺寸有很西也非常杂，其中需要应用到的技术主要有HTML、CSS、多种类，必须要充分考虑到布局与最后的显示效果，应首先JavaScript以及HTML5技术，而且还需要通过弹性图片技术考虑移动设备，这样就能够使响应式网页的开发效率得到一和媒体查询才能实现。本文所说的媒体查询就是指，通过不定程度的提高。“渐进增强”指的就是，利用响应式网页进同的媒体类型和条件，对样式表的规则进行定义。也就是说，作者简介：徐健（1979-），男，江西上饶人，硕士研究生，讲师。研究方向：计算机应用。—　　　１３　　　—计算机工程应用技术信息与电脑China Computer&Communication2018年第6期媒体查询可以将网页根据用户使用的浏览设备，显示相对应这样显示出来的效果最佳。网页属于三列布局时，会涉及很的网页尺寸，使用户的体验达到最佳。多内容。在进行单列布局以及双列布局的过程中，无法展现２　实现编码的过程出来的元素就可以通过三列布局的方式进行展现，选择对应元素（display：block）。要想实现三列布局，就必须要合理2.1　移动设备兼容设置元素的宽度属性width的百分比。在HTML文档中添加下面一段命令，主要的目的就是2.6　展示网页效果自动缩放网页，该命令为。这一段命令的主要目的就是，整个页面的制作，在网页当中添加想要的文字、图像、视屏使移动浏览器自动缩放网页，能够根据设备的实际宽度显示等相关内容。还需要添加一些功能性的内容，例如，网站上出来网页，并且也能够手动缩放网页，这样就可以使移动设各种不同的功能。后续的工作就是美化这些添加的内容。在备正常显示响应式网页。设计“移动版”的网页布局时，最需要注意的就是显示效果，一定要突出想要表达的内容，页面必须要保证简洁。完成首2.2　桌面浏览器兼容页的制作之后，就可以通过同样的制作方法将其他页面制作如果用户使用的是IE8以下版本的浏览器，就无法支持出来，这样就完成了整个响应式网站的开发工作。CSS媒体查询功能。而想要使用该功能，就需要升级浏览器，３　分析与结论或是加载外部JavaScript文件使IE8浏览器能够进行媒体查询。具体的参考代码如下所示：在设计响应式网页时，大体流程就是首先制作网站的“原 应采取（%）的方式，这样才可以确保网页的布局能够依照使用者设备的大小进行合理调整；（2）在保持网页风格一2.3　实现网页单列布局致的基础上，应适当添加一些特殊的功能，这样就可以丰富单列布局使网页能够在显示尺寸640像素以下的屏幕页面，提高用户的体验度。移动设备上展示很好的效果[2]。该布局能够让所有的内容区域按照屏幕的实际尺寸，显示成一列的状态。想要实现这４　实例介绍一目标，最重要的就是对所有的元素设置宽度属性width：本案例（数字媒体技术专业介绍网站）的外观设计不但100%。在HTML文件中当添加第一组div，将最外层div命要重视外在、内在的感官效果，并且也要重视前端以及后台名为“all”；将里面网页划分成三大区域，即头部“header”、的需求。在本文研究的这一方案中，彻底删除了网站中无用主体“main”以及最后走的底部是“footer”。主要的CSS的元素，也改良了很多页面内容的模块以及部分功能模块。代码为：.all {width：100%；max-width：1000px；margin：把页面元素划分为三大区域，分别是导航区、内容区以及最0 auto；}。表示这一元素会根据浏览器的窗口大小，自动调后的页脚导航区。导航区主要涉及的内容有企业的LOGO、整自身的宽度。但是自身的宽度最大像素是1 000，并且会搜索框以及主菜单等；内容区涉及的内容有：主要的图片、在这一盒子的居中位置展现。.header, .main, .footer{width：虚拟现实以及影视后期相关的简介。100%；}表示这三个元素与父元素是相同的比例。4.1　设计规划2.4　实现网页双列布局（1）美术设计。在开展响应式设计时，必须要遵循移双列布局是在屏幕显示尺寸范围在640～959像素显示动设备优先的原则，之后才是客户端等。所以在设计页面时，出来的效果。为了实现双列布局兼容，CSS代码当中就必须要重视移动端。而本次研究的实例是优先考虑客户端，之后要具备媒体查询的功能。要想实现双列布局，必须要将双列才是移动设备的显示效果。布局的元素宽度属性设置成width：49%（49%是参考值，（2）HTML结构的搭建。Bootstrap框架主要是采用应按照实际情况进行合理调整）。浮动属性是float。HTM LS属性、CSS3样式。制作网站页面时，都应按照下面2.5　实现网页三列布局这个格式设置。三列布局主要是在电脑上显示，尺寸也要大于960像素，...—　　　１４　　　—信息与电脑2018年第6期China Computer&Communication计算机工程应用技术 @media(min—width:@screen—sm—min) and4.2　媒体查询( max—width:@screen—sm—max.{…}要想实现响应式网页，非常重要的组成部分就是媒体查 @media (min—width:@screen—and—min) and询。在设计网站网页时，媒体查询最大的作用就是适配于手( max—width:@screen—and—max){…}机以及电脑中。而不同的设备，屏幕的尺寸也有很大的差别。５　结　语下面就是针对不同屏幕尺寸的代码：总而言之，响应式网页设计已成为目前网页开发非常重（1）超小屏幕，默认配置Bootstrap移动设备优先。要的一种方式。网页前端的工作人员必须要在充分掌握基础（2）小屏幕，@ media ( min-width@screen-smmin){…}。技术的条件下，进行多编码、多测试、多维护的工作，使开（3）中等屏幕，@media ( min-width@sereenmd-min)发出来的网页性能、受用户欢迎的程度达到最佳的状态。{…}。（4）大屏幕，@media ( min-width@screen-lg min{…}。参考文献实际应用的过程中，把CSS的影响限制在一定的屏幕尺寸内，详细的代码如下所示：[1]Ben Frain.响应式Web设计:HTMLS和CSS3实战[M]. @media(max—width@screen—xs—max王永强,译.北京:人民邮电出版社,2013.{…}[2]Stephen Hay.响应式Web设计全流程解析[M].余果,译.北京:人民邮电出版社,2014.（上接第12页）提升桌面终端运维满意度。端使用者配合，会打断到使用者的正常操作，无法经常开展的问题，用软件替代了人力，大大提高了效率，为主动服务参考文献提供了技术支撑。[1]田夏利,李雄飞.Java框架对初级开发者的束缚及化５　结　语解策略[J].软件导刊,2013(1).通过搭建桌面终端智能分析平台，并推广应用到广西电[2]曲文柱.浅谈企业信息化建设的意义[J].中国科技博网公司每台桌面终端，统一规范终端配置标准，远程执行网览,2012(32).络速度检测、开机速度检测和健康状况检测，为桌面终端运[3]王鸥,周小明.一体化企业级信息平台体系设计与应维提供预防性信息，运维人员不需要到现场就可以掌握终端用[J].电力信息化,2011(4):95-98.的运行状况和存在问题，节约了运维时间成本，提高了桌面[4]苏荣菠,廖海亮,吴彬,等.桌面管理系统在电力企终端维护效率，推动运维工作由被动性维护转变为主动维护，业终端策略应用研究[J].电力设备,2016(11).—　　　１５　　　—