不同宽度显示器下网页宽度的自适应

最新推荐文章于 2020-11-29 02:02:44 发布

mz_start2016

最新推荐文章于 2020-11-29 02:02:44 发布

阅读量2.6k

点赞数

电脑显示器是有大有小，浏览器的最大宽度也是跟着显示器去的，可是网页呢，一般宽度都是定的死死的，好在现在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>

不管浏览器是1024px宽的，还是1280px或是1440px的，进入后都会看到图示的效果，好像还不错，可是如果把浏览器的宽度压缩至很小呢？——
大哥大姐们，我只能说不好意思了。它跟着缩小了，甚至最后挤到下面去了~~

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

有了想法了，该怎么实现呢，好像有个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_r((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下的效果：
嘿，不错，你看那左边，好像到200px左右就不再缩小了，成。
看看麻烦的IE6下面的效果。
这是进去后的页面样子：
这是把浏览器缩到很窄的时候的样子：
我的妈啊，怎么就成了呢？
看看firefox火狐浏览器，照理来说应该没有问题，IE7都行，她也应该没得问题的。
呀吧爹！
最后检验一下chrome谷歌浏览器就可以宣布成功啦。
还有opera，
至此，我可以放心的宣布，宽度自适应框架测试成功。

不忙高兴太早，现在仅仅是个框架成功而已，一旦里面在写入东西，估计又会有不少新问题的，不管怎样，开动脑筋，一步一步解决，最后都会没有问题的。