`
buliedian
  • 浏览: 1238359 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

Web布局中的几种宽高自适应

 
阅读更多

前言

打开浏览器，输入一个网址，显示一个页面，页面最基本的布局和框架用户一目了然。但是用户所用的浏览器、显示器、分辨率大多都是不一样的，如何确保不同用户持有不同设备所看到同一个网址的页面显示内容相同呢？当然像亚马逊首页那一种布局会更个性化一些，它会根据用户持有设备的屏幕大小而现实内容。例如：一部PC机上可能一排现实5个商品，一部iPad上可能显示3个商品，而一部手机上可能一排只显示1个商品。至少不要 出现如下这种情况，在符合W3C标准的浏览器中显示正常，而在IE6,7中页面乱套，因为IE6,7仍然拥有很庞大的用户群；即使你做的Web应用是面向某些企业用户的，这种情况下用户较少，但你也不能强求用户使用哪一种浏览器。要解决这个问题，这就需要用到页面布局中的自适应，虽然这个问题看起来很简单。

我在这里将会介绍三种我最近在项目中用到的自适应：

  1. 页面整体宽度自适应
  2. iframe宽高自适应
  3. jqgrid高度自适应

页面整体宽度自适应

先看看下面的页面基本布局图

image

页面分为三个部分：
(1) Header，这一部分宽度自适应
(2) Left 左边栏，为定宽200px，一般为菜单或导航
(3) Right右侧主内容区域，宽度自适应

既然做了分解，我们就把它当做需求来一步一步实现它吧，首先是Header区域。
请看代码1：

<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#header
{
height: 70px;
 margin: 20px 30px;
padding: 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="header">
<img src="http://images.cnblogs.com/logo_small.gif" />
</div>
</body>

关键的代码只有一行，我已经标出。
现在有一个问题了，如果Header的内容也比较丰富，可能Logo + Banner的总宽度为1000px了，但有些小屏幕却看不完整，这时我们得为这个Header 加个最小宽度限制。在IE 7 +和W3C浏览器中，拥有一个min-width属性可以实现这个效果，但是IE6不支持（参照各版本IE浏览器CSS兼容性列表）。不过css expression可以帮我们解决这个问题，请看代码2：

<!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=utf-8" />
<title>Header自适应</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#header
{
/* IE6 不支持min-width属性，但是IE7+和W3C支持 */
min-width:1000px;
/* 用CSS表达式让IE6也支持最小宽度 */
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
height: 70px;
 padding-left: 30px;
padding-right: 30px;
}
#header_content{
width: 100%;
border: 1px solid #ccc;
height: 100%;
}
</style>
</head>
<body>
<div id="header">
<div id="header_content">
<img src="http://images.cnblogs.com/logo_small.gif" />
</div>
</div>
</div>
</body>
</html>

在代码2中我并没有直接更改#header用margin属性来控制，虽说margin:0 auto可以来控制居中自适应，但是如果需要页边距为30像素时用margin: 0 30px则不行了了（在Firefox满屏是可以的，但浏览器缩小时，左侧nargin是存在的，而右侧被吃掉了）

OK，现在已经实现Header部分的居中自适应了，下面的Left和Right也不会麻烦。虽然上面的Header层使用了expression来实现宽度自适应，但是下面的Right层则不能使用同样的方式，因为Header层依赖的是body，而Right层则不是。如果不考虑IE6的存在，则用如下代码就可以实现本文开头的布局图。请看代码3：

<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#header
{
/* IE6 不支持min-width属性，但是IE7+和W3C支持 */
min-width:1000px;
/* 用CSS表达式让IE6也支持最小宽度 */
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
height: 70px;
padding-left: 30px;
padding-right: 30px;
}
#header_content{
width: 100%;
border: 1px solid #ccc;
height: 100%;
}
#main{
/* IE6 不支持min-width属性，但是IE7+和W3C支持 */
min-width:1000px;
/* 用CSS表达式让IE6也支持最小宽度 */
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
height: 70px;
padding-left: 30px;
padding-right: 30px;
margin-top: 20px;
}
#left{
border: 1px solid #ccc;
float: left;
vertical-align:middle;
text-align:center;
width: 200px;
}
#right{
border: 1px solid #ccc;
 float: right;
position: absolute;
left: 240px;
right: 30px;
min-width: 790px;
vertical-align:middle;
text-align:center;
overflow: hidden;
}
</style>
</head>
<body>
<div id="header">
<div id="header_content">
<img src="http://images.cnblogs.com/logo_small.gif" />
</div>
</div>
<div id="main">
<div id="left">
<h2>Left</h2>
</div>
<div id="right">
<h2>Right</h2>
</div>
</div>
</body>

红色部分标出的是关键代码，又回到之前的问题了，min-width属性在IE6中不支持，所以你在IE6中运行代码3将得不到我们预期的结果。那么，现在就要借助js来实现这个效果了。请看代码4：

image


第一部分终于讲完了，呼~~~。

iframe宽高自适应

有了前面的基础，要做iframe的宽高自适应就很简单了。iframe高度自适应是根据屏幕的高度来的（无滚动条），宽度自适应已经通过前面的方式实现了，高度自适应只需要对height属性进行计算处理就可以实现。

根据上面提供的代码，要更改的地方很少。这里有一个完整的iframe例子下载：iframe auto width and height demo，代码可以直接看里面的。

无图无真相，还是截个图看看吧。

image

jqgrid高度自适应

jqgrid是一个较为强大的表格控件，对于它的介绍为不再赘述，至于它的用法和结合asp.net进行ajax分页的方式我将在下一篇讲述（不是loading once的方式，loading once存在一些bug）。由于上面的iframe高度已经根据屏幕的高度做了限制，而jqgrid提供了一页显示10,20,30条这种类似的选项，原有的高度是不可能让30条数据显示完全的。这就需要为jqgrid限制一个最大高度，例如300px，当内容的高度超出300px时，jqgrid就得以竖向滚动条滑动来显示内容。

假定我们已经为jqgrid绑定好数据源，jqgrid的高度为360px。要实现兼容所有浏览器的jqgrid高度自适应，我们现在还需借助一个东西，http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/，其实还是为了解决IE resize的bug。

<!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=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" src="js/jquery.wresize.js"></script>
<script type="text/javascript">
/* jqgrid绑定数据源，设置属性*/
$(function() {
$("#gridTable").jqGrid({
url: "...",
datatype: "json",
shrinkToFit: true,
width: "836",
height: "360",
colNames: [...],
colModel: [
...
],
jsonReader: {
...
},
prmNames: {
page: 'PageNumber',
rows: 'PageSize',
sort: 'OrderBy',
order: 'Sort'
},
loadonce: false,
sortname: 'FullDateTime',
sortorder: 'desc',
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30],
pager: "#gridPager"
}).navGrid('#pager2', { edit: false, add: false, del: false });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
function content_resize() {
var grid = $("#gridTable");
var h = $(window).height() - grid.offset().top - 30;
$('.ui-jqgrid-bdiv').css("height", h);
}
// 借助wresize插件解决IE resize的bug.
$(window).wresize(content_resize);
content_resize();
});
</script>
</head>
<body>
<table id="gridTable">
</table>
<div id="gridPager"> </div>
</body>
</html>

还是截两个效果图，图1每页显示10条，图2每页显示30条。

image

image

 总结

上面的代码中实际还是有一些问题的，在IE8中已经不支持expression表达式了，而且这种脚本式的css也影响代码的整体美观。除了最普通的一行式宽度自适应，其它种类的自适应都需要借助脚本来实现，想必大家现在已经知道最终的解决方案了，通过jquery + wresize插件能够做到兼容所有浏览器的宽高自适应。

 

Always keep dream, keep thinking, keep moving, even if the road obstacles , the one more important thing is that always be a pig for you, that's keep fool.

0
顶
0
踩
分享到：
| 分享一款jQuery的UI插件：Ninja UI
评论
发表评论

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

相关推荐

    flash自适应高度

    要让Flash自适应高度，我们可以采取以下几种策略： 1. **CSS布局调整**： 使用百分比单位来定义Flash对象的高度，这样它会根据其父容器的大小自动调整。例如，在CSS中设置`height: 100%`。但需要注意，Flash容器的...

    RichText自适应高度

    为了解决这一问题，开发者通常会采用以下几种策略： 1. **动态计算高度**：在渲染富文本时，可以通过计算每个字符的宽度和行间距，以及考虑图片、链接等元素的大小，动态地调整文本框的高度，以确保内容完整显示且...

    iframe自适应高度

    为了解决`iframe`自适应高度的问题，我们可以采用以下几种策略： 1. **JavaScript/jQuery 解决方案**：这是最常见的方法，通过监听`iframe`的`load`事件，获取到内容的总高度，然后设置`iframe`的高度。例如，使用...

    iframe自适应高度和宽度

    在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，在使用`iframe`时，如何使其高度和...

    Debug_WPF自适应_C#WPFwebbrowser_

    主要有以下几种布局： - **Grid**: 允许你创建灵活的网格布局，行和列可以根据内容自动调整大小。 - **StackPanel**: 沿着一个方向堆叠子元素，可以是垂直或水平方向。 - **DockPanel**: 子元素可以沿四个边缘...

    图文混排 label3中自适应

    以上就是关于“图文混排 label3中自适应”的几种方法，无论是iOS、Android还是Web开发，都有对应的解决方案来实现Label在图文混排中的自适应布局。在实际开发中，要根据项目需求和性能考虑选择最合适的方法。

    jQuery响应式与自适应代码案例

    自适应网页设计则更注重于预先定义好几种布局模式，针对特定的设备或屏幕尺寸使用不同的设计。jQuery可以帮助我们检测设备类型，并据此加载不同的CSS或JavaScript资源，实现页面的自适应。 在这个案例中，我们可以...

    jQuery自适应宽度跟高度相册代码

    4. **计算宽高比**：为了保持图片的原始比例，我们需要在调整大小时计算每个图片的宽高比。这可以通过获取图片的自然宽度（`naturalWidth`）和高度（`naturalHeight`），然后根据新的容器宽度来动态设置高度。 5. *...

    易语言网站后台管理UI界面源码 CEFUI WEBUI 自适应

    易语言是一种专为中国人设计的编程语言，它以简化的语法和中文编程为特色，旨在降低编程门槛，让更多的人能够参与到编程中来。本资源提供的是一个基于易语言开发的网站后台管理UI界面的源码，结合了CEF（Chromium ...

    android 自适应屏幕大小

    在Android开发中，面对各种不同尺寸和分辨率的设备，如何实现屏幕自适应是一个重要的课题。本文将详细解析Android系统如何处理屏幕自适应问题，并提供相应的解决策略。 首先，Android界面开发推荐使用“density-...

    制作自适应屏幕大小尺寸的网页，改变分辨率后需F5刷新.zip

    自适应网页设计（Responsive Web Design，简称RWD）是一种使网页在不同设备上展示良好且用户体验一致的技术。它允许网页根据用户使用的设备（如桌面电脑、平板、手机）的屏幕尺寸和方向进行动态调整。标题“制作...

    Web验证自适应（二）

    在Web验证界面中，自适应设计意味着无论用户使用何种设备，界面都应该清晰易读，按钮易于点击，输入字段方便填写。对于较小的屏幕，可能会折叠某些元素，或者重新排列元素以优化用户体验。 在提供的文件中，我们...

    html自适应页面

    HTML自适应页面设计是现代网页开发中的核心概念，它使得网页能够根据用户设备的不同特性，如屏幕尺寸、分辨率和方向，自动调整布局和内容显示，从而提供良好的用户体验。这一技术的发展，主要是为了应对移动设备的...

    图片尺寸自适应算法

    将图片的 `max-width` 设置为100%，可以确保图片不会超过其父元素的宽度，同时保持原始宽高比。`height:auto` 则让图片高度自动调整以适应宽度变化。 4. **百分比单位**： 在CSS中，使用百分比作为图片的宽度单位...

    JS实现DIV高度自适应窗口示例

    总结来说，文章讲述了在Web开发中利用JavaScript实现页面元素高度自适应窗口的方法，这不仅是一种页面响应式设计的基本技巧，而且在构建跨平台兼容的应用时至关重要。通过JavaScript代码，开发者可以动态地调整页面...

    web布局设计

    自适应布局则预先定义了几种不同宽度的布局模式。 2. 网格系统：网格系统是一种组织页面元素的方法，通过行和列创建可重复的结构，有助于保持设计一致性。Bootstrap、Foundation等框架都提供了强大的网格系统。 3....

    web布局设计demo

    "web布局设计demo"这个资源包显然聚焦于展示不同的布局模式和实践案例，帮助开发者理解和掌握网页布局的设计技巧。 在网页设计中，布局通常指的是如何在有限的屏幕空间内有效地组织和展示内容，包括文本、图片、...

    网页小游戏自适应

    首先，"自适应"（Responsive）是指网页设计的一种策略，它允许网页内容根据用户设备的屏幕大小和方向自动调整布局、图片大小和脚本功能。在网页小游戏领域，这意味着游戏界面应该能够灵活地适应手机、平板电脑和桌面...

    图片banner宽度自适应浏览器

    自适应布局（Responsive Web Design）是一种网页设计策略，它允许网页内容根据用户设备的屏幕尺寸和方向进行自动调整，以提供最佳的用户体验。在全屏Banner的场景下，这一特性尤为重要，因为它需要在大屏幕显示器、...

    数据表格JqGrid自适应列宽度

    在IT领域，尤其是在Web开发中，数据展示是一个关键部分，特别是在处理大量结构化数据时。JqGrid是一款基于jQuery的数据表格插件，它提供了一种高效、可定制的方式来展示和操作表格数据。本文将深入探讨“数据表格...

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