网页布局离不开对分辨率的设置,网页分辨率应该设多少才是合理的?本文就来为大家详细讲解一下。
网页分辨率的设置通常与屏幕分辨率密不可分,在15存大脑袋的CRT显示器时代,最常用的屏幕分辨率为 800×600,后来发展到17寸方屏液晶显示器,较为常用的屏幕分辨率为 1024 × 768,科技发展到今天,屏幕的种类已越来越多且以宽屏为主,可用分辨率有 1280 × 720 、1440 × 900(19寸宽屏主流)、1920 × 1080 等多种。
一般在网页制作时,网页分辨率的宽度不能超过屏幕分辨率,但对高度没有限制,以 1024 × 768 为例,考虑到要留出浏览器垂直滚动条的宽度,一般网页宽度定为 1002 像素,而高度不限。这样只要客户使用17寸以上的屏幕浏览网页时,当浏览器最大化的时候,就不会出现横向滚动条。
常用的屏幕分辨率所对应的网页分辨率如下:
1. 800×600 屏幕(15寸方屏),推荐网页宽为 778 像素
2. 1024 × 768 屏幕(17寸液晶),推荐网页宽为 1002 像素
3. 1280 × 720 屏幕,推荐网页宽为 1258 像素
4. 1440 × 900 屏幕(19寸宽屏液晶),推荐网页宽为 1418 像素
5. 1920 × 1080 屏幕,推荐网页宽为 1898 像素
可能你会说,你也不确定你的访客到底用什么样的屏幕浏览网页,但你还是希望网站能适应绝大多数浏览者的屏幕,怎么办?我们这里推荐两个方案:
1. 直接以 1024 × 768 屏幕为准进行网页制作
因为要适应大部分客户,我们知道现在几乎没有人用15寸大脑袋显示器了,可能部分人还在用17寸液晶屏,但现在市场的主流的是19寸屏幕,因此我们以17寸屏幕为准,制定网页宽度为 1002 像素,则可以适用所有比17寸大的屏幕,只是屏幕越大,浏览器左右两侧留白的部分将越大。
2. 设置网页宽度相对屏幕宽度的百分比,自适应屏幕
这种方法是在制作网页时,直接将页面宽度设置一个百分数,例如 98%,则它在任意屏幕中,都是以屏幕宽度 * 98% 的计算方式来算出网页宽度的,可以说是自动适用屏幕宽度,而不会出现浏览器左右留白。但这种方式的缺点在于,网页内部的版块、图片等宽度也都有自动适应网页宽度,操作上有一定难度。
下面通过一段 html 代码来了解如何设置网页分辨率
<html>
<head>
<title>网页分辨率设置</title>
</head>
<body>
<div style="width:1002px;">我是适应17寸以上屏幕的</div>
<div style="width:98%;">我是自适应的</duv>
</body>
</html>
在网页制作中,网页分辨率通常也被称为“网页宽度”,实际上分辨率也就是表示长度和宽度的另一种方式,只不过它的单位为“像素”。