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