网页布局离不开对分辨率的设置,网页分辨率应该设多少才是合理的?本文就来为大家详细讲解一下。

  网页分辨率的设置通常与屏幕分辨率密不可分,在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>

  在网页制作中,网页分辨率通常也被称为“网页宽度”,实际上分辨率也就是表示长度和宽度的另一种方式,只不过它的单位为“像素”。