掃一掃微信二維碼
掃一掃微信二維碼
網頁布局離不開對分辨率的設置，網頁分辨率應該設多少才是合理的？本文就來為大家詳細講解一下。
網頁分辨率的設置通常與屏幕分辨率密不可分，在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>
在網頁制作中，網頁分辨率通常也被稱為“網頁寬度”，實際上分辨率也就是表示長度和寬度的另一種方式，只不過它的單位為“像素”。
建站咨詢熱線
4006123011