如何让网页自适应各种分辨率

 我来答
智者总要千虑
高粉答主

2017-12-12 · 说的都是干货,快来关注
知道顶级答主
回答量:7.9万
采纳率:88%
帮助的人:1.4亿
展开全部
网友们上网通常会采用800×600、1024×768两种分辨率, 网页不是用来给自己看的,所以必须让自己做的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法,特别说明一下除非网站是艺术类的,有特别需求,通常都会首先照顾分辨率设置为800×600的大众化标准。
一、 自然拉伸
如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为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>
赛麦吉
2023-06-03 广告
这是一张ISO12233:2000标准的分辨率测试卡,目前已被ISO12233:2014 eSFR分辨率测试卡所取代,但是目前使用ISO12233:2000标准的分辨率测试卡还是比较多。 类型 反射式:由前面照明的反射式测试标板 透射式:可... 点击进入详情页
本回答由赛麦吉提供
__于心
2018-01-22 · TA获得超过106个赞
知道小有建树答主
回答量:95
采纳率:89%
帮助的人:35.1万
展开全部
给html属性设置让他宽,高自适应100% 外边距以及内边距都为0

里面的一些div要固定起来,就无论你换到多大的屏幕他都不会拉伸。
不怎么好形容,你可以找一个例子看。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
雀淼谢韶
2019-03-05 · TA获得超过3918个赞
知道大有可为答主
回答量:3123
采纳率:28%
帮助的人:251万
展开全部
现在大多数电脑的分辨率都是1024×768的,所以做的网页在这种分辨率下都能没必要都是满屏
如果很想要满屏的那建议你用table
所有的宽度设置都是
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式