"做网页设计的时候总是混淆响应式设计和自适应设计，开始我以为这俩都是指根据屏幕大小自动进行适配。所以和前端小哥哥沟通时候，前端小哥哥蒙圈了，跟我强度这俩不是一个东西~~~~今天从设计角度和开发角度介绍下这俩的区别"
   “开篇”
响应式网页设计和自适应网页设计是根据开发方式提出来的分类。 
1.1：响应式设计响应式布局：就是通过检测视口分辨率，针对不同的客户端在客户端做代码处理，来展现不同的布局和内容。实现在不同屏幕分辨率的终端上浏览网页的不同展示方式。
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。可以智能的跟进用户行为已经使用的设备环境进行相对于的布局。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。
响应式网站的几个标志：
1、同时适配PC + 平板 + 手机等；
2、标签导航在接近手持终端设备时改变为经典的抽屉式导航；
3、网站的布局会根据视口来调整模块的大小和位置；
1.2：自适应设计
自适应布局：就是通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。
自适应布局的几个标志：
1、大多只是适配单个终端的主流N个主流视口；
2、当视口大小低于设置的最小视口时，界面会出现显示不全，并且出现横向滑动条；
3、总体框架不变，横线布局的版块太多会有所减少。
“总结”
综上所述，在开发的时候，要从实际的项目出发。
采用响应式布局：适合展示类企业站。对于内容较少、主要为展示类网站。缩小浏览器就能看到，
开发：开发一套网站。
缺点：UI设计会有限制。内容多电脑手机速度会卡顿。
案例：优设、腾讯的ISUX、苹果官网、掘金。
采用自适应布局：适合大型网站、商城。对于内容多，布局较为复杂的情况，管理类的网站采用分开开发的方式。
开发：开发多套网站。通过2-3个网站完成适配。多套代码。
缺点：开发多套。
案例：虎课，京东。缩小时候有一点响应，但是没有适配手机，手机单独开发的。

                    
								            

                
需求描述
报表在WEB页面输出的时候，行、列都很多，需要设置横向、纵向滚动条来固定报表表头。这样，就造成针对客户端不同的分辨率的显示器，滚动条的高度和宽度固定，对于分辨率小的机器，在页面上看不到滚动条，分辨率大的机器，滚动条右下方留出了很大的空白，这样造成页面不美观，影响用户体验。
 
解决方法
可以通过jsp调节参数实现。
步骤一：
1.在客户访问一个报表页面之前，加一个redirect.jsp页面，里面加入一个js函数，来获取客户端浏览器窗口的大小：
<SCRIPT>
        var w = 0;   
        var h = 0;   
         //通过深入Document内部对body进行检测，获取浏览器窗口大小   
         if (document.documentElement  && document.documentElement.clientHeight && document.
documentElement.clientWidth){   
             h = document.documentElement.clientHeight;   
             w = document.documentElement.clientWidth;   
         }else{
            w = 1259 ;
            h = 632 ;
         }     
//重定向到报表所在的jsp页面，并且把客户端浏览器宽度、高度，作为参数
//传递给报表所在的jsp页面     
       window.location.href=”<%=path%>/mis2/reportcenter/res/showReport.jsp?<%=param%>&w=”+w+”&h=”+h ;
 </SCRIPT>
 
步骤二：
在报表所在的jsp页面上（showReport.jsp），获取浏览器的宽度、高度。
String w = request.getParameter(”w”) ;
       String h= request.getParameter(”h”) ;
 
步骤三：
修改发布标签
              <report:html name=”report1″ reportFileName=”a.raq”
                     funcBarLocation=””
                     params=”<%=param.toString()%>”
                     needScroll=”yes”
                     scrollWidth=”<%=w%>” –动态设置滚动条宽度、高度
                     scrollHeight=”<%=h%>” 
       />
            
                
        
        
                
    

<div id="web_bg" style="position:absolute; width:100%; height:100%; z-index:-1">
<img style="position:fixed;" src="http://a.lanyes.org/bg1.jpg" height="100%" width="100%" />
</div>

 
转载于:https://www.cnblogs.com/zjy954/p/5436525.html

(http://www.pconline.com.cn/pcedu/sj/wz/other/0308/210199.html)
■ 自适应分辨率可扩展二层JS下拉菜单

　　序言：

　　随着互联网的普及和网页制作技术的发展，越来越多的网友开始制作自己的网站。做为网站最重要的部分—导航菜单也出现了各式各样的设计和制作方法。其中下拉式导航菜单已经成为多栏目大信息量网站的首选导航方式。那么，在下面我将简单介绍一下众多下拉菜单制作方法中完全使用JS自动生成的“自适应分辨率可扩展二层JS下拉菜单”的工作原理和使用方法。

　　1、 S下拉菜单原理

　　下拉菜单实际上就是在开始的时候显示一级或者说是主菜单（图一）。当触发条件（例如：鼠标移动到上面时）显示次级菜单（图二）。



图一



图二

　　那么如何实现这样的效果呢。其实很简单。所有的下拉菜单都是通过图层的显隐来实现的。在文件下载的时候，其实主菜单和次级菜单都以经形成或者说下载到了客户端也就是你的机器里。只是次级菜单被隐藏起来。隐藏的方法一般是使用javascript 配合css控制次级菜单的图层的属性visibility为隐藏。所以在开始的使用你是看不见次级菜单的。当满足触发条件（例如：鼠标移动到上面）时，在使用javascript来控制次级菜单显示。当在次满足触发条件时（例如：鼠标移开），控制次级菜单隐藏。

　　我们现在讲的这个“自适应分辨率可扩展二层JS下拉菜单”可以自动适应浏览器分辨率的改变始终保持相对位置。可以方便的自己定制菜单显示内容及连接页面。可以随意扩充主导航和次导航的栏目个数。可以自由改变连接和导航表格的样式和外观等等。

　　2、"自适应分辨率可扩展二层JS下拉菜单"js代码详解


//--------------- 主导航条内容 ------------//
var mainLayer=new Array("蓝色理想","动意营造");//主导航栏目

//--------------- 次导航条内容 ------------//
var subLayer0=new Array("论坛","文献"); //导航栏目一下的次级栏目
var subLayerHttp0=new Array("#","#");//主导航栏目一下的次级栏目连接地址
var subLayer1=new Array("论坛","文献");//导航栏目二的次级栏目
var subLayerHttp1=new Array("#","#");//主导航栏目二的次级栏目连接地址
//--------------- 主导航条Table参数调整 ------------//
var mainTableTdWidth=100; //每个TD的宽度，调整主导航内容间距
var mainTableBorder=0; //调整主导航表格边框宽度
var mainTableCellspacing=0; //调整主导航表格Cellspacing
var mainTableCellpadding=1; //调整主导航表格Cellpadding
var mainTableBgcolor="#000000"; //调整主导航表格背景色
var mainTableBordercolor=""; //调整主导航表格编框颜色
var mainTableBackgroundImg=""; //调整主导航表格背景图片url地址
var hrefClassName="link" //调整url风格样式
var mainTableTdBgcolor="B2CBCF"; //调整主导航表格Td色

//--------------- 次导航条Table参数调整 ------------//
var subTableBorder=0; //调整次导航条表格边框宽度
var subTableCellspacing=0; //调整次导航条表格Cellspacing
var subTableCellpadding=1; //调整次导航条表格Cellpadding
var subTableBgcolor="#000000"; //调整次导航条表格背景色
var subTableBordercolor=""; //次导航条表格编框颜色
var subTableBackgroundImg=""; //次导航条表格背景图片url地址
var subTableTdBgcolor="B2CBCF"; //调整次导航表格Td色
var sbuTabbleTop=21; //次导航表格上下微调
var sbuTabbleLeft=-1; //次导航表格左右微调


//--------------- 系统参数*请勿调整 ------------//
var layerMax=mainLayer.length+10;
var layerName="index";


//--------------- 生成下拉菜单 ------------//
function createMainLayer(){ 
document.write("<table border=0 cellspacing=0 cellpadding=0><tr><td><div id='wall' οnmοuseοut=layervib('visible','"+layerMax+"') style='position:relative; left:0px; top:0px; width:100%; z-index:1' ><table width="+mainLayer.length*mainTableTdWidth+" border='"+mainTableBorder+"' cellspacing='"+mainTableCellpadding+"' cellpadding='"+mainTableCellpadding+"' bgcolor='"+mainTableBgcolor+"' bordercolor='"+mainTableBordercolor+"' background='"+mainTableBackgroundImg+"'><tr>");
for(i=0;i<mainLayer.length;i++){
document.write("<td width='"+mainTableTdWidth+"' bgcolor='"+mainTableTdBgcolor+"' class='"+hrefClassName+"' οnmοuseοver=layervib('visible','"+i+"')>&nbsp;<a href='#'>"+mainLayer[i]+"</a></td>");
}
document.write("</tr></table>");

for(j=0;j<mainLayer.length;j++){
createSubLayer(j);
}
document.write("</div></table></td></tr></table>");
}

//--------------- 生成每项下拉菜单内容 ------------//
function createSubLayer(num){
var subLayerName= layerName +num;
var subLayerLeft=(mainTableTdWidth*num)+mainTableCellpadding+mainTableBorder;
var subLayerList=eval("subLayer"+num);
var subLayerHttpList=eval("subLayerHttp"+num);
document.write("<div id='"+subLayerName+"' style='position:absolute; left:"+(subLayerLeft+sbuTabbleLeft)+"px; top:"+((mainTableBorder+mainTableCellspacing+mainTableCellpadding)*2+sbuTabbleTop)+"px; z-index:2; height: 24px; visibility: hidden' οnmοuseοver=layervib('visible','"+num+"') οnmοuseοut=layervib('visible','"+layerMax+"')>");
if(subLayerList.length!=0){
document.write("<table width='100px' border='"+subTableBorder+"' cellspacing='"+subTableCellpadding+"' cellpadding='"+subTableCellpadding+"' bgcolor='"+subTableBgcolor+"' bordercolor='"+subTableBordercolor+"' background='"+subTableBackgroundImg+"'") 
for(h=0;h<subLayerList.length;h++){ 

document.write("<tr><td bgcolor='"+subTableTdBgcolor+"' width='100%' class='link'>&nbsp;<a href='"+ subLayerHttpList [h]+"' class='link'>"+subLayerList[h]+"</a>&nbsp;</td></tr>");
}
document.write("</table>");
}
document.write("</div>"); 

}


//------------------------------次菜单显隐控制--------------------------//
function layervib(type,num){
var H=type;
var temp=(H='visible'?'hidden':'visible')
for(var i=0;i<mainLayer.length;i++){
var E=eval('document.all.index'+i+'.style');
var H=eval(i);
if(i==num){E.visibility=type}else{E.visibility=temp};
}
}


　　3、"自适应分辨率可扩展二层JS下拉菜单"js代码使用方法。


　　(1) 将上面的代码存储为js_daohang.js.放在和调用的页面同一个目录下。 
　　(2) 在需要使用的叶面中在如下位置添加<script language=javascript src=js_daohang.js>


<html>
<head>
<title>平安证券柜台系统...</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="text.css" type="text/css">
<script language=javascript src=js_daohang.js>
</head>

　　（3）在需要显示下拉菜单的地方使用

<script language=javascript>
createMainLayer();
</script>

　　来产生菜单。如下例。可以随意摆放到页面的任何位置。 



<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr> 
<td width="300">&nbsp;</td>
<td width="71%" align="center"> 
<script language=javascript>
createMainLayer();
</script>
</td>
</tr>
</table>

　　(4)、如何添加新的主菜单及次级菜单的栏目。

　　假设我们要在已有的栏目里新增加一个“七色鸟”栏目。下面有“论坛”和“文献”两个次级栏目。那么我么首先要在代码的如下部分添加“七色鸟”。


var mainLayer=new Array("蓝色理想","动意营造","七色鸟");//主导航栏目
0 1 2


　　然后在如下的位置添加“论坛”和“文献”栏目及连接地址。


var subLayer0=new Array("论坛","文献"); //导航栏目一下的次级栏目
var subLayerHttp0=new Array("#","#");//主导航栏目一下的次级栏目连接地址
var subLayer1=new Array("论坛","文献");//导航栏目二的次级栏目
var subLayerHttp1=new Array("#","#");//主导航栏目二的次级栏目连接地址
var subLayer2=new Array("论坛","文献");//导航栏目三的次级栏目
var subLayerHttp2=new Array("#","#");//主导航栏目三的次级栏目连接地址


　　注意：蓝色部分是需要新添加的部分。红色部分是要修改的部分。要和上面的编号一一对应。 (5)、其他细节调整请参考代码详解部分。


　　4、附注及扩充。


　　代码中主要使用的函数及方法详解。

Document.write("tmp")页面中写入tmp.
var subLayerHttp1=new Array();定义一个新的数组subLayerHttp1.
For(I=0;I<tmp;I++){语句}设置I=0，当I的值小于tmp的值时执行语句，同时I的值加1。
var temp=(H=值1?值2:值3)当H的值等于值1的时候temp等于值2。反之temp的值等于值3。


增强功能。
//--------------- 系统参数*请勿调整 ------------//
var layerMax=mainLayer.length+10;
var layerName="index"


可以设置layerName=其他字段以生成新的下拉菜单。使页面内共存两个下拉菜单。