如何让网页自适应电脑屏幕分辨率
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
如何让网页自适应电脑屏幕分辨率
很多人会遇到这样的问题,当你在自己的电脑上精心制作好网页,却发现在别人的不同分辨率的电脑上浏览你的页面时,自己的网页排版乱得一塌糊涂,或者被拉伸,或者被压缩,要不就是不能完整显示在屏幕内。这是为什么呢?因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计,但是却没有考虑到网友们可能使用了别的屏幕分辨率。
目前,网友们上网通常会采用800×600、1024×768两种分辨率,由于网页不是用来给自己看的,所以我们必须让自己的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法,特别说明一下除非你的网站是艺术类的,有特别需求,通常我们都会首先照顾分辨率设置为800×600的大众化标准。
一、自然拉伸
如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为100% ,表格就会根据分辨率的不同自行调整宽度。
二、固定居中
在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费劲。所以目前普遍采用的方法是固定居中法!
现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主。只要在网页原代码的
后紧加一句三、兵分两路
如果你的网页不经常更新,而且对页面效果极其在意,那好,你就设计两个页面,分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。
例如:
function redirectPage() {
var url_else = "/";
var url_800x600 = "/";
var url_1024x768 = "/";
var url_1366x768 = "";
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;
}