掃一掃微信二維碼
掃一掃微信二維碼
網(wǎng)頁布局離不開對分辨率的設(shè)置，網(wǎng)頁分辨率應(yīng)該設(shè)多少才是合理的？本文就來為大家詳細講解一下。
網(wǎng)頁分辨率的設(shè)置通常與屏幕分辨率密不可分，在15存大腦袋的CRT顯示器時代，最常用的屏幕分辨率為 800×600，后來發(fā)展到17寸方屏液晶顯示器，較為常用的屏幕分辨率為 1024 × 768，科技發(fā)展到今天，屏幕的種類已越來越多且以寬屏為主，可用分辨率有 1280 × 720 、1440 × 900（19寸寬屏主流）、1920 × 1080 等多種。
一般在網(wǎng)頁制作時，網(wǎng)頁分辨率的寬度不能超過屏幕分辨率，但對高度沒有限制，以 1024 × 768 為例，考慮到要留出瀏覽器垂直滾動條的寬度，一般網(wǎng)頁寬度定為 1002 像素，而高度不限。這樣只要客戶使用17寸以上的屏幕瀏覽網(wǎng)頁時，當瀏覽器最大化的時候，就不會出現(xiàn)橫向滾動條。
常用的屏幕分辨率所對應(yīng)的網(wǎng)頁分辨率如下：
1. 800×600 屏幕（15寸方屏），推薦網(wǎng)頁寬為 778 像素
2. 1024 × 768 屏幕（17寸液晶），推薦網(wǎng)頁寬為 1002 像素
3. 1280 × 720 屏幕，推薦網(wǎng)頁寬為 1258 像素
4. 1440 × 900 屏幕（19寸寬屏液晶），推薦網(wǎng)頁寬為 1418 像素
5. 1920 × 1080 屏幕，推薦網(wǎng)頁寬為 1898 像素
可能你會說，你也不確定你的訪客到底用什么樣的屏幕瀏覽網(wǎng)頁，但你還是希望網(wǎng)站能適應(yīng)絕大多數(shù)瀏覽者的屏幕，怎么辦？我們這里推薦兩個方案：
1. 直接以 1024 × 768 屏幕為準進行網(wǎng)頁制作
因為要適應(yīng)大部分客戶，我們知道現(xiàn)在幾乎沒有人用15寸大腦袋顯示器了，可能部分人還在用17寸液晶屏，但現(xiàn)在市場的主流的是19寸屏幕，因此我們以17寸屏幕為準，制定網(wǎng)頁寬度為 1002 像素，則可以適用所有比17寸大的屏幕，只是屏幕越大，瀏覽器左右兩側(cè)留白的部分將越大。
2. 設(shè)置網(wǎng)頁寬度相對屏幕寬度的百分比，自適應(yīng)屏幕
這種方法是在制作網(wǎng)頁時，直接將頁面寬度設(shè)置一個百分數(shù)，例如 98%，則它在任意屏幕中，都是以屏幕寬度 * 98% 的計算方式來算出網(wǎng)頁寬度的，可以說是自動適用屏幕寬度，而不會出現(xiàn)瀏覽器左右留白。但這種方式的缺點在于，網(wǎng)頁內(nèi)部的版塊、圖片等寬度也都有自動適應(yīng)網(wǎng)頁寬度，操作上有一定難度。
下面通過一段 html 代碼來了解如何設(shè)置網(wǎng)頁分辨率
<html>
<head>
<title>網(wǎng)頁分辨率設(shè)置</title>
</head>
<body>
<div style="width:1002px;">我是適應(yīng)17寸以上屏幕的</div>
<div style="width:98%;">我是自適應(yīng)的</duv>
</body>
</html>
在網(wǎng)頁制作中，網(wǎng)頁分辨率通常也被稱為“網(wǎng)頁寬度”，實際上分辨率也就是表示長度和寬度的另一種方式，只不過它的單位為“像素”。
建站咨詢熱線
4006123011