h5响应式网页设置（移动端h5响应式布局）

　　1、概念：H5响应式网页设计是以H5技术编码，同时具备适配PC端和移动端多种屏幕尺寸的响应式网页设计技术，用以提高同一网页在PC端和移动端的表现和访问体验。 　　2、优势：（1）H5响应式网页设计技术能让网页在各种屏幕尺寸的设备上都能得到合理的展示，网页上元素的宽高、分布可自适应调整；（2）此外，H5响应式网页设计技术还可以大大简化移动端开发，减少开发和维护的时间和成本，节省大量的开发资源；（3）利用H5响应式网页设计技术，同一网站域名可以同时应用于PC端和移动端，方便搜索引擎的收录与索引，降低用户的访问成本；（4）H5响应式网页设计技术能够更好的将该网站品牌有效的推广出去，让品牌更多人知晓。 　　3、设置步骤：（1）针对不同屏幕尺寸，使用media query特性，给出宽度临界值；（2）使用@media特性，将不同屏幕尺寸都包括在内，而且可以设置多个临界值；（3）将网页中的图像、文字等元素使用H5响应式布局，较小屏幕尺寸时使用百分比，达到不同屏幕的适配；（4）让网站的交互体验友好，加入一些触屏交互特效；（5）此外，也可以使用相关框架，如bootstrap等，进行网页的快速开发和布局。 　　4、不足：（1）H5响应式网页设计技术存在跨浏览器兼容性差，对复杂的网页布局有一定的限制；（2）由于多个屏幕尺寸同时访问，页面结构或代码有可能变得冗长，极易引发网页加载速度减慢，影响用户体验；（3）H5响应式网页设计技术的复杂性也是值得考虑的问题，开发人员需要有一定的能力和设计师有较高的视觉审美能力，以较好的配合完成网站开发。 　　5、实践：首先，应该熟悉H5响应式网页设计基本技术，掌握media query特性，@media特性，H5响应式布局，javascript和jQuery等知识；其次，在接手项目之前，应该熟悉项目的要求，详细阅读客户的需求文档，根据客户的需求和要求制定可行的项目方案；最后，进行项目的开发实践，将项目的业务需求结合H5技术，制定可行的代码开发计划，根据计划进行网页开发实施；最后，进行项目调试、故障排除和网站发布，以确保此项目符合客户的需求要求。 　　一、h5响应式网页设计概述 　　h5响应式网页设计，正如其名，是将网页和其上的内容用html5技术，在不同的设备平台上展现出来的网页样式。之所以采用 h5响应式网页设计，是因为有越来越多的不同尺寸的设备逐渐支持html5技术，而且html5的兼容性越来越好，更能够满足不同设备及设备性能需求。 　　二、h5响应式网页设计流程 　　1. 仯先根据网站需求分析，收集网站背景、网站用户和浏览器信息，采用虚拟机技术，对网站进行模拟效果测试和布局，并且采用移动优先的思路对网站的界面和功能进行针对性的调整和优化。 　　2. 运用不同的html5技术，使用css3完成设计，制作出与用户屏幕尺寸和分辨率匹配的页面布局，使浏览体验更佳。 　　3. 引入移动端和PC端共用的JavaScript库和框架，以便在移动端和PC端运行网页时，提交布局和功能差异性，保证不同设备上用户能够获得一致性、舒适性和高效性的浏览体验。 　　4. 基于各个终端环境，采用不同的技术解决方案，重新封装那些有限的HTML元素，将响应式网页转换为响应式APP（ResponsiveAPP），以满足移动端设备用户需求。 　　三、h5响应式网页设计优势 　　1. 网页可以在不同设备，如PC端，平板电脑和智能手机等终端呈现出不同的布局效果，而不需要不同的网页进行加载，也不会出现有的设备无法正常的渲染的情况。 　　2. 代码规范，可以消除许多代码重复，统一排版，加入相应的注释，更有利于多个设计师进行网页制作的协作开发。 　　3. 可以节省资源，简化开发难度，减少平台之间开发人员的浪费，并且不需要进行大量的测试。 　　4. 在一定程度上减少访问量，降低搜索引擎对网站的抓取任务，更好的服务于搜索引擎优化工作。 　　四、h5响应式网页设计思路 　　1. 从移动设备优先型设计开始，以便为访客提供更佳的体验，以及表达和传达公司的品牌理念，将更多的用户带入网站。 　　2. 采用HTML5元素，完成针对不同设备的界面兼容，降低设备间的差异性，提升浏览器的兼容性。 　　3. 将css3和JavaScript结合起来，实现页面的响应式调整，使用户能够在不同的设备上获得统一的浏览体验。 　　4.可以根据不同的浏览器类型添加少量的代码，进行浏览器支持的检测，并给出提示性信息，协助用户更好的使用浏览器功能。 　　五、h5响应式网页设计实践 　　1. 采用HTML媒体查询，支持不同类型的设备，根据尺寸及分辨率设置尺寸及布局的大小，以满足未来不同移动设备的需求。