DDR爱好者之家

最佳网页宽度及其兼容实现方法
站长资源 2024/4/28 佚名
20 1538
DDR爱好者之家 Design By 杰米
1.设计网页的时候，确定宽度是一件很苦恼的事。

以jb51.net为例，根据Google Analytics的统计，半年多以来，访问者的屏幕分辨率一共有81种。最小的分辨率是122x160，这应该是手机；最大的分辨率是3360x1050，天知道是什么设备。

一张网页要在大小如此悬殊的各种屏幕上，都呈现令人满意的效果，难度可想而知。举例来说，一张400px宽的图片，在800px的屏幕上会占据50%的宽度，而在1920px的屏幕上（Windows Vista的流行设置），只占据20%。
2.

目前，常见的屏幕分辨率宽度大概有6种：800px，1024px，1280px，1440px，1680px和1920px。其中，1024px最常见，但是随着大屏幕显示器的流行，更高的分辨率正变得越来越多。

常见的解决方法有两种：

第一种：用javascript根据不同的客户端分辨率，选择css样式表文件，具体的做法可以看这里。

第二种：采用弹性布局（Fluid Width Layout），实现网页宽度的自适应。

第一种方法的优点是，可以根据不同屏幕分辨率，采用完全不同的布局，缺点是要设计和维护多张样式表，比较麻烦。第二种方法只采用一张样式表，比较省事。

下文就根据css-tricks上的解决方案，讨论如何实现第二种方法，实际上是很简单的。

最佳网页宽度及其兼容实现方法

3.

首先，网页的缺省宽度，确定为满足1024px宽度的显示器。这不仅因为1024x768是现在最常见的分辨率，还因为这个宽度对网页最合适：1）它放得下足够的内容，足够三栏的布局；2）单行文字不宜太长，1024px已是极限，否则容易产生阅读疲劳；3）在当前的互联网带宽条件下，网页难以采用大分辨率所要求的大尺寸图片。

其次，网页宽度会在780px-1260px的范围内，自动变化，即最小不小于780px，最大不超过1280px。

最后，对于更大的分辨率，网页内容会自动居中。

4.

下面就是CSS文件的写法，只要4行。需要注意的是，这几行的语句都针对整个页面，即body标签或者最外层的那个div区域。

margin: 10px auto;

这一行保证了网页在任何分辨率下，都会居中。

min-width: 780px;
max-width: 1260px;

这二行规定了网页的最小和最大宽度。注意，IE6不支持这二行，即它们在IE6中是无效的。

width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");

这一行是针对IE6的解决方法。它采用了CSS表达式，也可以通过javascript实现。

另外，如果想让内层的各个区块也自动伸缩，它们的宽度可以采用百分比的形式，比如：

#div-left{
width:50%;
}

#div-right{
width:50%;
}

最后的效果和源码下载请查看这里。通过变动浏览器窗口的大小，可以发现网页在780px-1260px的范围内会自动伸缩。

5.

最后，建议大家平时使用计算机的时候，不要盲目采用高分辨率，意义不大。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米