html ima自动缩放,页面整体宽度自适应.pdf

Posts - 3, Article s - 0, Co m me ts - 2 1 Cnblogs Dashboard Login

loofpeek HOME CONTACT GA LLERY

W布be局中的几种宽高自适应

20 11-12-26 15 :57 by kee pfoo l, 108 1 vis its, 收藏, 编辑

前言

打开浏览器，输入一个网址，显示一个页面，页面最基本的布局和框架用户一 了然。但是用户所用的浏览器、显示器、分辨率大多都

是不一样的，如何确保不同用户持有不同设备所看到同一个网址的页面显示内容相同呢？当然像亚马逊首页那一种布局会更个性化

一些，它会根据用户持有设备的屏幕大小而现实内容。例如：一部PC机上可能一排现实5个商品，一部iPad上可能显示3个商品，而一

部手机上可能一排只显示1个商品。至少不要 出现如下这种情况，在符合W3C标准的浏览器中显示正常，而在IE6,7 中页面乱套，因为

IE6,7仍然拥有很庞大的用户群；即使你做的Web应用是面向某些企业用户的，这种情况下用户较少，但你也不能强求用户使用哪一

种浏览器。要解决这个问题，这就需要用到页面布局中的自适应，虽然这个问题看起来很简单。

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

1. 页页面面整整体体宽宽度度自自适适应应

2. iframe宽宽高高自自适适应应

3. jqgrid高高度度自自适适应应

页面整体宽度自适应

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

co ve rte d by We b2PDFCo ve rt.co m

页面分为三个部分：

(1) Header，这一部分宽度自适应

(2) Left 左边栏，为定宽200px ，一般为菜单或导航

(3) Rig t右侧主内容区域，宽度自适应

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

请看代代码码1：

body{

font-family: Arial, Helvetica, sans-serif;

mar in: 0;

paddin : 0;

}

#header

{

hei ht: 70px;

margin: 20px 30px;

paddin : 0;

border: 1px solid #ccc;

}

关键的代码只有一行，我已经标出。

现在有一个问题了，如果Header的内容也比较丰富，可能Logo + Banner的总宽度为1000px 了，但有些小屏幕却看不完整，这时我们

得为这个Header 加个最小宽度限制。在IE 7 +和W3C浏览器中，拥有一个min-widt 属性可以实现这个效果，但是IE6不支持(参照各

版本IE浏览器CSS兼容性列表)。不过css expression可以帮我们解决这个问题，请看代代码码2：