HTML5响应式布局企业网站设计+源代码(2)
1. 课题研究目的和意义
21世纪，随着互联网的发展，越来越多的人使用手机和平板电脑查看邮件，浏览网页，访问Web页面。随着时代的发展，移动技术必须得有所更新，因此网站的设计也发生了多方面的变化。为了顺应时代的发展，为客户提供最好的服务，我们可以有很多的选择。比如，对于单个移动设备来重新设计一个网站，既浪费时间又浪费了资源。因此利用和响应式设计技术以满足不同设备体验需求成为了重要内容。
该网站以满足各类终端用户的需求响应式设计，最终用户可以将所有最好的接入体验。当然，专为手机或平板电脑的应用程序的网站或应用程序也能满足一些游客的需求，但根据调查数据显示，传统的移动终端设备有230种不同的屏幕尺寸，我们不能对所有的这些共同230种屏幕尺寸来设计一个独特的网站或应用程序的应用程序，这也不太现实，所以这次响应式设计体现了它的价值。
据非官方调查显示，移动设备的用户在2015年已经完全超过了PC端的用户，这个数据直接将响应式网站的设计推到了高峰，也就是说如果没有响应式网站。想象一下，一个移动终端不能正常显示的网页将会给公司带来很多的负面影响。为了避免造成单位的损失，响应式网站的设计是个流行的趋势。
2. 响应式网站设计概述
2.1传统Web设计的不足
2.2.1网页大小不能匹配移动设备屏幕大小
截至目前，很多的计算机显示器的分辨率一般适于在1024 * 768，但通常会被固定在1000个像素宽度的页的左右，设计和其它页面中的形式，按钮，导航栏，横幅广告Web设计元素在此前提下宽的设计。但我们都知道移动设备的屏幕分辨率比分辨率PC机小得多，大多在800至360*960*640。如果使用原来的设计方法，来设计网页，并使用移动设备来显示，然后我们看到的是比页面的一部分必然要被削减，并最终将无法显示该页面的完整内容的移动设备的屏幕大小。在这种方式中，用户可以仅通过缩放和移动整个页面来显示被裁剪部，对客户的用户体验造成了直接的影响。
2.2.2页面布局固定
正如你所知道的不同尺寸的移动设备的有着不同的屏幕尺寸范畴，而屏幕的分辨率是相同的。因此，需要我们设计网页中的总体布局，可根据不同的屏幕尺寸或分辨率被调整。否则，网页显示在移动设备上将是一个混乱的页面布局，从而极大降低了用户的访问体验和对公司的品牌和形象，最终直接影响网站所以者的效益。网站设计传统的方式主要以两列或三列布局，整体结构是相对固定的，稳定的，仅用于向计算机用户浏览器访问，但不是为移动终端用户的浏览和经验。
2.2响应式网站的设计思想
响应式网页设计理念是整个Web开发的相关页面可以与不同的移动设备显示器兼容的，主要指的是门户页面可以自动判断在不同的环境不同的设备，不同的屏幕分辨率，不同额尺寸方向的用户行为。入口页面通过自己的调整从而实现与各种设备和浏览器兼容从而正常显示。这种设计技术涉及通过多种组合物的具体方式，包括CSS媒体查询的查询，流体和弹性网格布局和图片。无论用户访问的网页是一个什么样的终端设备，其中包括（PC端，平板电脑，或手机），不论全屏浏览还是半屏浏览都可以随时确定当前环境并自动切换分辨率，调整画面尺寸和相关脚本功能能与不同的设备，在图1所示：
图1响应式页面的对设备的识别与调整
3. 关键性开发技术的介绍
本课题应用了网页设计中常用的技术，其中包括HTML、DIV+CSS、Photoshop、Dreamweaver。
上一篇：公司访客管理信息系统设计与实现