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

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

阅读更多

曾发过一篇博文“根据客户端分辨率改变图像大小的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时候,页面宽度不在缩小。

分享到:
评论

相关推荐

    浏览器分辨率不一的浮动问题解决方法

    在网页设计中,浏览器分辨率不一致常常导致布局问题,尤其是涉及到浮动元素的排列。这个问题在创建导航栏等横向布局元素时尤为突出。本篇文章将详细探讨如何解决浏览器分辨率不一致时的浮动问题。 首先,我们来看一...

    CSS3 @media 媒体查询 实例源代码,调整浏览器窗口大小。当宽度小于300时,背景色变成淡蓝,否则淡绿色.zip

    在网页设计领域,CSS3(层叠样式表第三版)引入了媒体查询(@media queries)这一强大特性,使得我们能够根据设备的特定条件,如视口宽度、屏幕分辨率等,来应用不同的样式规则。这极大地提升了网页的响应式设计能力...

    iframe根据页面内容自适应高度和宽度

    为了解决这个问题,我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ...

    jQuery文字大小自适应屏幕_调整浏览器屏幕文字大小自适应效果

    总的来说,通过jQuery和自适应设计的原理,我们可以创建出一个在不同设备和屏幕尺寸上都能良好显示的网页,其中文本大小能根据浏览器窗口的变化自动适配,提供优秀的阅读体验。在实际开发中,开发者应结合HTML、CSS...

    大图片根据分辨率自适应宽度仍居中显示

    首先,我们要解决的问题是:一个具有原始尺寸为1920*900像素的大图片,在较小的屏幕如1024*768分辨率下,如何自适应宽度并保持居中。通常,大图片在小屏幕上会超出容器的宽度,导致无法完全显示,更不用说居中了。 ...

    网页超过一屏时自动浮动在网页最上方的

    通过使用媒体查询(Media Queries),我们可以根据设备的视口宽度(viewport width)调整固定header的样式,例如在小屏幕上可能需要减小header的大小或更改布局。 考虑到网页性能,需要注意的是,固定头部可能会...

    webdriver实现浏览器窗口的最大化.docx

    在自动化测试领域,Selenium ...总之,确保浏览器窗口最大化是自动化测试中的一个重要步骤,它可以帮助模拟用户的真实行为,并全面覆盖测试场景。在实际应用中,可能需要根据不同的浏览器和环境灵活调整最大化策略。

    C# WebBrowser页面内容缩放

    在.NET框架中,C#提供了一个内置的控件——`WebBrowser`,它允许开发者在Windows应用程序中嵌入一个浏览器引擎,以便展示网页内容。这个控件基于Internet Explorer的渲染引擎,因此它能够处理HTML、CSS和JavaScript...

    div css网页适应不同分辨率技巧

    为了应对浏览器的滚动条,我们可以使用JavaScript进行动态调整,例如,`lod()`函数会根据浏览器窗口宽度动态分配`div`的宽度。 ```html ();"&gt; * {margin: 0px; padding: 0px;} #left, #right {height: 300px;} ...

    能实现响应式的简单例子

    这个“简单例子的响应式布局”压缩包很可能是包含了一个简单的响应式网页示例,你可以通过解压并用浏览器查看源代码,进一步学习和理解这些概念如何实际应用。通过实践和反复试验,你可以更好地掌握响应式设计的技巧...

    jQery使网页在显示器上居中显示适用于任何分辨率

    总结来说,这个代码示例展示了如何利用 jQuery 实现一个动态响应的网页居中布局,能够自动适应不同分辨率的显示器。通过获取窗口宽度,调整容器的宽度和内容的位置,可以确保网页在任何分辨率下都能保持居中显示。...

    JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码

    在网页设计中,为了提供更好的用户体验,适应不同设备和分辨率的屏幕,开发人员常常需要根据用户的设备分辨率来调整页面的布局和样式。本篇将探讨如何使用JavaScript来判断不同的分辨率,并根据判断结果加载相应的...

    jQuery简单文字瀑布流排版代码.zip

    瀑布流布局的核心在于响应式设计,即页面布局能够根据用户的屏幕分辨率自动调整。在jQuery实现的这个例子中,代码会检测浏览器窗口的大小,并据此调整文字的排列方式。当用户改变窗口大小时,布局能够即时响应,保持...

    responsive_webpage_example1_page_mobile_web_

    媒体查询是CSS3的一个特性,允许我们根据设备特性(如视口宽度、分辨率等)来应用不同的样式。 在这个示例中,开发者可能使用了Bootstrap、Flexbox或Grid布局系统来实现响应式网格,确保内容在不同屏幕尺寸下都能...

    Dreamweaver网页设计电子教案(全)完整版课件整套教学课件.ppt

    框架技术也是Dreamweaver中的一个重要概念,它可以将网页分割成多个独立的区域,每个区域可以加载不同的网页内容,例如在星座介绍的案例中,可以创建一个框架集,让导航栏固定,而主要内容区域则根据用户的点击动态...

    纯CSS3实现的煎饼自动化生产流水线动画效果源码.zip

    CSS3还提供了媒体查询(Media Queries)功能,可以根据设备的特性(如屏幕宽度、分辨率等)来调整样式,确保在不同设备上都能呈现良好的动画效果。 6. 性能优化 在实现此类动画时,需要注意性能优化。避免过度...

    canvas 画布在主流浏览器中的尺寸限制详细介绍

    总结来说,canvas画布在主流浏览器中的尺寸限制是一个重要的考虑因素,开发者需要根据具体目标平台和性能需求来合理设定canvas的尺寸。通过了解和掌握这些限制,我们可以更好地利用canvas进行高性能、跨平台的图形...

    div+css样式

    通过设置 `width` 属性为一个特定值(如 `200px`),我们可以确保这个 `div` 的宽度始终保持不变,即使在不同分辨率的屏幕上也是如此。此外,还设置了 `height`、`border` 和 `background-color` 属性来定义高度、...

    web图片缩放改变图片的大小

    需要注意的是,如果只设置一个尺寸,另一个尺寸会按比例自动调整,以保持原始的宽高比。 其次,CSS也是调整图片大小的重要工具。我们可以使用`style`属性直接在HTML中定义样式,或者在外部CSS文件中设置。例如: `...

    jQuery响应式动态修改字体大小代码.zip

    在这款代码中,jQuery被用来监听浏览器窗口或容器的尺寸变化,当检测到尺寸变化时,会自动调整文本的字体大小,从而适应新的布局环境。 实现这个功能的关键在于响应式设计的核心概念——媒体查询(Media Queries)...

Global site tag (gtag.js) - Google Analytics