1. 研究目的与意义
随着互联网的不断发展，特别是手机端移动互联网的发展，网页浏览设备也是尺寸各异如手机，平板，pc等各有不同，对于显示尺寸固定的网页具有诸多的缺陷，因而如何能使网页的内容能够在不同尺寸的设备下进行正常的运行和显示是一大重要的问题，提高网页对不同端的适应以及用户的浏览体验是网页制作人员必须掌握的技术，本篇文章主要针对自适应网页HTML的制作技术进行深入的研究和探讨。
固定尺寸的页面是利用绝对单位固定网页的宽度和高度，这使得网页不会应为页面的大小而随机改变。
但是后来随着移动设备的普及，显示设备的尺寸就开始多样化，尤其是手机的分辨率更是种类繁多所以对网页自适应技术要求。
2. 课题关键问题和重难点
1.将网页修改为百分比布局 当某个浏览窗口处于媒体查询固定的范围之外，网页就需要水平滚动才能完整浏览，而通过百分比布局可以页面元素根据窗口大小在一个又一个媒体查询之间灵活修正样式，具体来讲，就是css代码不会指定具体像素宽度：width:xxx px;而是会指定一个百分比宽度：width:xx%;或者直接就是width:auto;这里大家可以根据一个简易的公式将固定像素宽度转换成对应的百分比宽度：目标元素宽度上下文元素宽度=百分比宽度2.用CSS如何控制网页中图片自适应大小 在设计自适应网站页面时图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制.课题难点：页面自适应主要采用两种布局方式：流式布局，响应式布局等，但是他们都有实现的难点：1.流式布局：虽然可以实现一定程度上的自适应，但流式布局需要对排列的每一个元素设置大小，切随着尺寸的变化，并不能适应所有不同尺寸的显示设备。
2.响应式布局：需要兼容太多设备，工作效率太低。
且页面改动较大时，CSS代码不易维护，造成代码混乱
3. 国内外研究现状（文献综述）
1.摘要当今的网页页面需要自布置页面，即根据当前设备 来自动调节页面尺寸大小从而动态定制布局，例如一个页面中的表格包含文本，则存在多种方法将这个表格及其表格内的内容自适应到多种设备上去，但是我们更需要的时一种简单快捷的方法，从而节约程序算法的时间复杂度。
其中一种策略是 ，使用贪婪策略，从最宽的合理布局开始，并反复选择缩小列，缩小导致表高度增加最少。
该算法简单，快速，足以在在线应用程序中使用，并且比使用HTML推荐的表格布局算法获得的布局显着更合理。
4. 研究方案
1、在网页代码的头部，加入一行标签在网页的中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释： 1）width=device-width ：表示宽度是设备屏幕的宽度 2）initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100% 3）minimum-scale=1.0：表示最小的缩放比例 4）maximum-scale=1.0：表示最大的缩放比例5）user-scalable=no：表示用户是否可以调整缩放比例2、宽度不要用绝对的width:auto;/width:XX%;3、字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小rem1）html{font-size:62.5%;}2）body {font:normal100%Arial,sans-serif;font-size:14px;font-size:1.4rem; }4、流动布局1）left{width:30%;float:left}2）right{width:70%;float:right;5、选择加载CSS自动探测屏幕宽度，然后加载相应的CSS文件
5. 工作计划
搭建系统的开发环境使用web开发者工具开发自适应内容的HTML页面布局方法与实现。
2.系统的需求分析系统的需求分析包括可行性分析，系统的流程以及逻辑以及计算机软硬件配置和开发平台。
这些都需要考虑在内。
以上是毕业论文开题报告，课题毕业论文、任务书、外文翻译、程序设计、图纸设计等资料可联系客服协助查找。
