`
alert_mm
  • 浏览: 166674 次
  • 性别: Icon_minigender_2
  • 来自: 厦门
社区版块
存档分类
最新评论

根据浏览器分辨率自动调整网页宽度的一个例子

浏览器XHTMLCSSJavaScriptWeb 
阅读更多

曾发过一篇博文“根据客户端分辨率改变图像大小的JS脚本”，介绍一个简单的图像大小自适应的例子。事实上，如何兼顾不同分辨率下用户的浏览效果，一直是web程序员头痛的问题之一。

 
　　目前，大部分用户的浏览器分辨率为800px*600px和1024px*768px，极少数为　640px*480px，当然，1280px*1024px（偶目前的）及更高的分辨率，将逐步成为主流。就用户的使用习惯而言，纵向滚动是很自然的，但横向滚动，就让人恼火了。所以，当前的大部分web页面设计，均采用800px宽度居中的形式来设计。这样的好处无疑是很明显的，较好的兼容性，无横向滚动，并且由于固定大小，界面可以设计得很美观。
 
　　但是，固定宽度大小（800px）的设计，是不得已而为止的办法。在1280px*1024分辨率下，800px宽度的页面就像一根小棍子立在屏幕中间，内容全部挤在一起，看起来很痛苦，而且，浪费了极大的屏幕空间。那么，设计可根据用户分辨率自动调整宽度的网页，应该是个更好的选择。
 
　　在最近的网站升级中，这方面的工作纳入日程，以下是一个简单但完备的页面例子。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta name="Security" content="public" />
<meta name="DC.Rights" content="Copyright (c) 2007 by Johnson Zhong" />
<meta name="KEYWords" contect="xhtml sample" />
<meta name="DEscription" contect="xhtml sample" />
<meta name="Author" contect="Johnson Zhong" />
<meta name="Robots" contect="all" />
<style type="text/css">
BODY{
 MARGIN: 0px;
}
#wrap {
 PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: expression(this.offsetParent.clientWidth<800?"770px":"99%"); PADDING-TOP: 2px; min-width: 770px
}
#main {
 CLEAR: both; BACKGROUND: #fff; MARGIN-TOP: 6px;
}
#leftbar {
 BORDER-RIGHT: #dddddd 1px solid; BORDER-LEFT: #dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; BORDER-BOTTOM: #dddddd 1px solid; BACKGROUND: #F2F9DC; FLOAT: left; PADDING-BOTTOM: 5px; WIDTH: 188px; height:100%
}
#cenbar {
 FLOAT: left; PADDING-BOTTOM: 10px; WIDTH: 100%;
}
#sublogopanel {
 CLEAR: both; width:100%; height:80px; position:relative; BACKGROUND: url(/_img/ad-bg.jpg) repeat-y left;
}
#rightbar {
 FLOAT: left; PADDING-BOTTOM: 10px; OVERFLOW: hidden; WIDTH: 180px; margin-left:0px; margin-top:0px; background:#cccccc
}
</style>
<title>xhtml sample!</title>
</head>
<body>
<!--body层开始-->
<div id="wrap">
 <div id="main">
 <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td width="188" height="100%" valign="top">
  <!--左边-->
  <div id="leftbar">
   <table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
   <tr>
    <td height="72" valign="top">&nbsp;</td>
   </tr>
  </table>
    </div>
  <!--左边结束-->
  </td>
  <td width="100%" valign="top">
  <!--中间内容-->
  <div id="cenbar">
  <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
   <tr>
     <td width="100%">
     <div id="sublogopanel">
      <img height="80" width="388" src="/_img/sublogo_esource.jpg">
     </div>  
    </td>
   </tr>
  </table>
    </div>
  <!--中间内容结束-->
  </td>
  <td width="180" valign="top">
  <!--右边-->
  <div id="rightbar">
  <table width="100%" height="72">
   <tr>
    <td width="180" height="1">
    </td>
   </tr>
  </table>
  </div>
  <!--右边结束--> 
  </td>
 </tr>
 </table>
 </div>
</div>
</body>
</html>
 
以上代码中，将页面树向分为三栏，其中左右栏宽度固定，中间栏宽度自动调整。

 

加红的两处地方比较关键，第一处：

WIDTH: expression(this.offsetParent.clientWidth<800?"770px":"99%");

　　通过在CSS样式表中应用javascript判断：如果当前窗口宽度小于800，则页面宽度为770px，否则为当前窗口宽度*99%；

 

<img height="80" width="388" src="/_img/sublogo_esource.jpg">


　　在中间层插入一张图片，确保当用户窗口宽度小于800时候，页面宽度不在缩小。

分享到：
| window.onload and showModalDialog根据内 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics