收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 19456|回复: 7

[教程] 实现1024px,1280px,1440px,..宽度显示器下面网页宽度的自适应

[复制链接]
发表于 2009-11-24 11:46:52 | 显示全部楼层 |阅读模式
电脑显示器是有大有小,浏览器的最大宽度也是跟着显示器去的,可是网页呢,一般宽度都是定的死死的,好在现在800px宽的显示器基本上去淘汰了,所以网站页面基本上都是1000px的宽度,我的显示器是1440px宽的,所以现在这个写文章的页面两边分别有我一个食指长的宽度,稍微有点宽哦。但是对使用一点影响都没有的啦~~可是呢,有时候希望在各个大小的显示器下达到同样的比例效果,怎么半呢?我最早看到宽屏,窄屏切换的页面是在hao123网站上,可是一看代码,有点小小的失望,原来是两套css,通过js切换的啦,没有什么高深的,会用js实现换肤技巧的这个也应该会啦。

后来又发现一个地方网页自适应,是一套css,放大缩小浏览器窗口都不会有错位,而且中间那块大小会自动的缩放,可是一看代码,有点心凉哦,大大的table标签,原来是表格,确实,表格本身就有自适应的功能,可能我不喜欢表格,让我觉得很乱很烦,其实归根结底是我表格技术很不行,所以从心底不喜欢它。ok,这种table的方法我决定不用了。就自己着手吧,哦,忘说了,那个宽度自适应的网站是http://my.yahoo.com,有兴趣可以去参考参考。

现在讲讲我吧,看雅虎的那个自适应网站对我有帮助的,知道了自适应后网页到底该是个什么样子,该怎么判断。所以现在开动自己的脑筋,结合平时积累的些知识一步一步的实现它了。

下面我要提两个关键字百分比宽度,最小宽度

好,一步一步来,先看看单纯的使用百分比的自适应框架

<title>宽度自适应1</title>
<style type="text/css">
.content{width:100%; height:800px; }
.left{width:22%; height:500px; background:#0066CC; float:left; }
.center{width:50%; height:500px; float:left; margin-left:10px; background:#993300;}
.right{width:22%; height:500px; float:left; margin-left:10px; background:#CC9900;}
</style>
</head>

<body>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>

   27f3602ca9797b2b359bf77a.jpg


不管浏览器是1024px宽的,还是1280px或是1440px的,进入后都会看到图示的效果,好像还不错,可是如果把浏览器的宽度压缩至很小呢?——

02.jpg

大哥大姐们,我只能说不好意思了。它跟着缩小了,甚至最后挤到下面去了~~

看来单纯的宽度百分比是不行了,那该怎么办呢?你不想吗?这挤下去是应为百分比它比的是浏览器的宽度,这浏览器宽度小了那你有什么办法,可是要是这个百分比比的是外面的一个标签,而且这个标签给它限定个最小宽度,那岂不....

有了想法了,该怎么实现呢,好像有个css标签是min-width,对,就是这个min-width,firefox火狐支持这个,IE7也支持这个,但是IE6不听话啊,不支持此标签,那该怎么办呢,好在IE下有个expression行为表达式实现js的效果,所以可以用expression实现IE6下的最小宽度了。现在看下面增加了最小宽度限制的代码:

<title>宽度自适应1</title>
<style type="text/css">
.content{width:100%; height:800px; min-width:980px; width:expression((documentElement.clientWidth < 980) ? "980px" : "100%" ); }
.left{width:22%; height:500px; background:#0066CC; float:left;}
.center{width:50%; height:500px; float:left; margin-left:10px; background:#993300;}
.right{width:22%; height:500px; float:left; margin-left:10px; background:#CC9900;}
</style>
</head>

<body>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>

先看看IE7下的效果:

03.jpg

嘿,不错,你看那左边,好像到200px左右就不再缩小了,成。

看看麻烦的IE6下面的效果。

这是进去后的页面样子:

04.jpg

这是把浏览器缩到很窄的时候的样子:

05.png

我的妈啊,怎么就成了呢?

看看firefox火狐浏览器,照理来说应该没有问题,IE7都行,她也应该没得问题的。

06.jpg

呀吧爹!

最后检验一下chrome谷歌浏览器就可以宣布成功啦。

07.jpg

还有opera,

08.jpg

至此,我可以放心的宣布,宽度自适应框架测试成功。

不忙高兴太早,现在仅仅是个框架成功而已,一旦里面在写入东西,估计又会有不少新问题的,不管怎样,开动脑筋,一步一步解决,最后都会没有问题的。
发表于 2009-11-24 13:03:28 | 显示全部楼层
CSS三列布局,左右宽度固定,中间自适应宽度
<div style="width:90%; margin:0 auto;">
   <div style="width:200px; float:right; >这是右侧的内容 固定宽度</div>
   <div style="width:150px; float:left; >这是左侧的内容 固定宽度</div>
   <div style=" margin-left:160px;margin-right:210px;>中间内容,自适应宽度</div>
</div>

简单的问题,切忌不要搞复杂。

[[i] 本帖最后由 anan360 于 2009-11-24 13:05 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-11-26 13:22:56 | 显示全部楼层

回复 2# anan360 的帖子

有问题
回复 支持 反对

使用道具 举报

发表于 2009-11-26 13:54:48 | 显示全部楼层
未标题-1.gif
这个的确挺讨厌,

 提示:您可以先修改部分代码再运行



overflow :

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-11-26 14:41:41 | 显示全部楼层
顶一下
回复 支持 反对

使用道具 举报

发表于 2009-11-26 15:48:16 | 显示全部楼层
expression((documentElement.clientWidth < 980) ? "980px" : "100%" )
这种方法,有时候是会耗内存的,而且会使IE6崩掉


my.baidu.com也是和楼主所说的布局。但不知道有谁知道它是如何实现的。

[[i] 本帖最后由 zxw9184 于 2009-11-26 15:54 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-12-4 21:02:42 | 显示全部楼层
自适应宽度的布局不适合做美工比较强的网页
回复 支持 反对

使用道具 举报

发表于 2009-12-5 11:41:38 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-29 09:40 , Processed in 0.124685 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表