html窗口缩小后版面乱版,为何我写好的页面改变窗口大小后布局就乱了?

让网页版面自动适应屏幕分辨率的技巧

一、 自然拉伸

如果你的网站结构没有用到大量的图形来衔接,主要*表格来定结构,那么你就可以使用该方法。非常适用于主要*表格、文字来表达信息的简单的网页页面。

制作表格时,只要你把表格的宽度属性定义为100% ,表格就会根据分辨率的不同自行调整宽度。

二、 固定居中

自然拉伸法的好处自不必说,可以总是充满整个屏幕,但是弱点也很明显:一来如果网页版面复杂,各图形元素之间有精确的的定位关系,一旦拉开或者压缩就会彻底变形;二来即使版面不太复杂,文字行数亦不好控制。有时候分辨率一旦变化,要么太密,要么太挤,就失去了作者设计版面的意图了。所以目前各大网站普遍采用的方法是固定居中法!

该方法的制作方法很简单。在制作最大的表格时,把表格属性的宽度像素定义为一个固定数值,并且让表格居中即可。以后制作的表格,就会限定在这个表格之内,永远都不会超出800×600分辨率的屏幕,网页的大小相当于固定死了。当浏览者使用1024×768的分辨率浏览网页时,屏幕两边就会留下白边,看起来觉得比较自然。

三、 兵分两路

如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。把这两个首页文件分别命名为index800.htm和index1024.htm 。然后在空白的索引页index.htm中加入以下代码到前面:

Script language=”javascript”

if (window.screen){

var w=screen.width;

url_800=”index800.htm”;

url_1024=”index1024.htm”

//请根据你的文件命名修改

if (w835){

self.location.replace(url_800);

}//加入判断条件,还可以用“&”加入多个判断条件

if (w=835){

self.location.replace(url_1024);

}

}

/Script

这样,当访问者打开你的索引页时,系统就会判断访问者的屏幕分辨率,然后转到相应的首页。

取消

评论

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值