如何让网页自适应电脑屏幕分辨率

很多人会遇到这样的问题，当你在自己的电脑上精心制作好网页，却发现在别人的不同分辨率的电脑上浏览你的页面时，自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率。
目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非你的网站是艺术类的，有特别需求，通常我们都会首先照顾分辨率设置为800×600的大众化标准。
一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。

二、 固定居中
在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得”不堪入目”。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！
现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主。只要在网页原代码的后紧加一句

，前加一句就OK了。不过有几个问题这是要注意一下，第一个要注意的是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在中加入leftmargin=0，即这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。

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

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; }

来源：CSDN

作者：Qcherlsh

链接：https://blog.csdn.net/Qcherlsh/article/details/47065607