学html的时候，网页宽度还记得960px吗，为什么？

咱们来看一组数据：

首页页面宽度 px：

Yahoo! 950

淘宝 950

MySpace 960

新浪 950

网易 960

Live Search 958

搜狐 950

优酷 960

AOL 960

上面列举的都是Alexa全球排名前100的站点，它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点：页面结构较复杂，都可以认为是门户型网站。

再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点，它们的首页宽度没什么固定规律，共同的特点是：功能专一，页面结构相对简单。

根据上面的简单分析可以认为：当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.

这是一件很有趣的事情，为什么要选择这个宽度呢？这个宽度值究竟有什么魔力？

神奇的960

设计师们对苹果情有独衷。在 1024 x 768 的分辨率下，打开Firefox：

自然状态下，Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框，网页的实际大小为上图中的红色部分，高宽为 960 x 650.

有趣的960就这样出现了。是的，可以认为一切就这么简单。栅格系统最早出现在平面设计领域，设计师们爱用苹果，苹果下浏览器的默认宽度为960px, 于是960就这么“自然”地出现了。

数字背后的奥妙

上面的“自然”出现，细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960，而不是其它什么1000之类的整数，自然另有奥妙。

科学界有很多问题都可以归结到数学问题上，我们也从数学着手：

960可以分解为2的6次方乘以3和5, 这使得960可以分割成以下宽度的整数倍：

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480共26种（26 = 7 * 2 * 2 - 2, 减去2是去掉1和960自身），我们标记为：

N(960) = N(2^6 * 3 * 5) = 26

根据上面的算法，可以得到：

N(360) = N(2^3 * 3^2 * 5) = 22N(480) = N(2^5 * 3 * 5) = 22N(720) = N(2^4 * 3^2 * 5) = 28N(750) = N(2 * 3 * 5^3) = 14N(800) = N(2^5 * 5^2) = 16N(960) = N(2^6 * 3 * 5) = 26N(1000) = N(2^3 * 5^3) = 14N(1024) = N(2^10) = 9N(1440) = N(2^6 * 3^2 * 5) = 34N(1920) = N(2^7 * 3 * 5) = 30

根据直觉（严格证明也不难，不过还是留给数学系的学生去证明吧），我们得到一个有趣的结论：

要使得N(width)较大，width的取值有两个系列：

A系列： …, 320, 720, 1440, …

感觉有用的朋友，点个关注，给个收藏，就是对我坚持更新，最好的支持

页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop

网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>请调整浏览器窗口</title>

</head>

<body>

<h2 align="center">请调整浏览器窗口大小</h2><hr>

浏览器窗口的实际高度: <input type="text" name="availHeight" size="4"><br>

浏览器窗口的实际宽度: <input type="text" name="availWidth" size="4"><br>

</form>

<!--

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数：获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

//通过深入Document内部对body进行检测，获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

//结果输出至两个文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions();

//调用函数，获取数值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。

置对象宽度以百分比计算，随外级对象宽度变化而自适应按百分比显示宽度，接下来为大家案例演示百分比宽度样式。

假如设置一个css宽度为80%，为了观察效果设置css border为黑色实线边框，css高度为100px，对象css命名为“.thinkcss”

Css代码如下

.thinkcss{margin:0 auto;width:80%;height:150px;border:1px solid #000}
/* css注释：设置css margin:0 auto是为了让此对象居中 */

Html代码如下

<div class="thinkcss">我宽度为百分比80%，高度为150px 1px黑色边框</div>

在线咨询

上一篇：html网页的代码大全
下一篇：前端系列教程-JavaScript在网页动画中的使用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

学html的时候，网页宽度还记得960px吗，为什么？

您的项目需求