网站制作中的网页分辨率怎么调？

雷诺网络•2016-10-14 17:14:00•雷诺干货•

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

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

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

文章关键词