html页面怎样能够自适应电脑屏幕宽度?

html-css09

html页面怎样能够自适应电脑屏幕宽度?,第1张

网友们上网通常会采用800×600、1024×768两种分辨率,由于网页不是用来给自己看的,所以我们必须让自己的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。

一、 自然拉伸

如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为100%

,表格就会根据分辨率的不同自行调整宽度。

二、 固定居中

在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费劲。所以目前普遍采用的方法是固定居中法!

现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主。只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个要注意的是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body

leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。

三、 兵分两路

如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。

例如:

<script LANGUAGE="JavaScript">

function redirectPage() {

var

url_else = "http://www.163.com/"

var

url_800x600 = "http://www.sohu.com/"

var

url_1024x768 = "http://www.sina.com.cn/"

var url_1366x768

= "http://www.qq.com"

if ((screen.width ==

800) &&(screen.height == 600))

window.location.href= url_800x600

else if ((screen.width == 1024) &&

(screen.height == 768))

window.location.href=

url_1024x768

else if ((screen.width == 1366) &&(screen.height ==

768))

window.location.href=

url_1366x768

else

window.location.href=

url_else

}

</script>

宽度自适应吧.不要设置成1300px,width:100%margin:0 autodiv标签里的宽度不超过分辨率可以设置max-width:100%这样就不怕了,不过兼容性不是很好,ie6不认识,你可以搜一搜兼容性的办法