不同宽度显示器下网页宽度的自适应
后来又发现一个地方网页自适应，是一套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，
至此，我可以放心的宣布，宽度自适应框架测试成功。
不忙高兴太早，现在仅仅是个框架成功而已，一旦里面在写入东西，估计又会有不少新问题的，不管怎样，开动脑筋，一步一步解决，最后都会没有问题的。
不同宽度显示器下网页宽度的自适应相关推荐
- 1024下网页宽度标准
研究网页栅格系统前,来看一组数据: 网站 首页页面宽度 px Yahoo! 950 淘宝 950 MySpace 960 新浪 950 网易 960 Live Search 958 搜狐 ...
- html网页大小自动调整大小,根据电脑屏幕分辩率大小自动调整网页宽度
目前,电脑显示器主要为液晶显示器,它们的屏幕大小参差不齐,分辨率自然也大小不一,从面导致同一大小的网页在不同分辨率的电脑显示千差万别,可能有的显示正常,有的显示乱.这就要求在设计网页时处理好这个问题, ...
- css响应式网页设计：自适应屏幕宽度、移动页面开发技巧
html响应式网页设计:自动适应屏幕宽度 文章目录 html响应式网页设计:自动适应屏幕宽度 背景 一."自适应网页设计"的概念 二.允许网页宽度自动调整-使用meta标签:vie ...
- css网页屏幕自适应,css自适应宽度 如何让网页自适应所有屏幕宽度
如何设置一个div的宽度为自适应宽度?div里只有文字.感情的戏,小编没演技.这场戏女主角是你而小编只是戏里的一个傻逼. #choise ul li a { display:block; border ...
- 最佳网页宽度及其实现
1. 设计网页的时候,确定宽度是一件很苦恼的事. 以minifun.cn为例,根据Google Analytics的统计,半年多以来,访问者的屏幕分辨率一共有81种.最小的分辨率是122x160,这应 ...
- 【CSS布局】已知布局元素的高度，写出三栏布局，要求左栏、右栏宽度各为300px，中间自适应。
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局, flex 盒子布局.float 浮动布局.position 定位布局,grid 网格布局,还有针对于移动端的 ...
- html网页宽度自动适应手机屏幕宽度的方法
html网页宽度自动适应手机屏幕宽度的方法 web项目中经常会出现html页面需要自适应手机屏幕的情况.可以通过设置屏幕的缩放比例来实现: 一.使用meta标签,这也是普遍使用的方法,理论上讲使用这个 ...
- 一般网页宽度设置多少像素合适？
1.800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定. 2.1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出 ...
- JS 获取浏览器、显示器 窗体等宽度和高度
转载自 JS 获取浏览器.显示器 窗体等宽度和高度 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见 ...
最新文章
- 软件测试中7个令人匪夷所思的真理
- Windows Server 2012 配置远程桌面帐户允许多用户同时登录
- 清北学堂模拟赛d6t3 反击数
- 专访中科创达王璠：怎样做好嵌入式人工智能的算法开发？
- iOS内存管理系列之一：对象所有权与引用计数
- vscode 文件编码转换_荐几个让你开发效率“飞起”的VS Code 插件
- [图形图像]一次光线追踪的尝试
- 手撕代码合集[短期更新]
- Atitit 提升进度的大原则与方法 高层方法 attilax总结
- 织梦mysql安装教程视频教程_dedecms织梦模板安装教程视频/图文步骤(模板秀出品)...
- 人体姿态识别研究综述（详细归纳！）
- yolov3原理解析及代码流程
- 031. 静以修身，俭以养德，非淡泊无以明志，非宁静无以致远。
- 科技品牌软文营销怎么讲故事
- 英语听力训练常采用的方法
- C++转erlang后感想
- 洛谷P3966 [TJOI2013]单词 题解
- 如何将栅格数据与行政边界_实时大数据监控–与边界专家Gary Read进行问答
- cfn-signal
- 往前推算时间算法示例-java