網(wǎng)站開(kāi)發(fā)：如何讓網(wǎng)頁(yè)自適應(yīng)電腦屏幕分辨率？

網(wǎng)站開(kāi)發(fā)：如何讓網(wǎng)頁(yè)自適應(yīng)電腦屏幕分辨率？

網(wǎng)站開(kāi)發(fā)很多人會(huì)遇到這樣的問(wèn)題，當(dāng)你自己的電腦上精心制作好網(wǎng)頁(yè)，卻發(fā)現(xiàn)在他人的不同分辨率的電腦上瀏覽你頁(yè)面時(shí)，自己的網(wǎng)頁(yè)排版亂得一塌糊涂，或者被拉伸，或者被壓縮，要不就是不能完整顯示在屏幕內(nèi)。這是為什么呢？因?yàn)橥ǔ３鯇W(xué)者朋友都按照自己的屏幕分辨率對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)，但是卻沒(méi)有考慮到網(wǎng)友們可能使用了別的屏幕分辨率。

目前，網(wǎng)友們上網(wǎng)通常會(huì)采用8006001024768兩種分辨率，由于網(wǎng)頁(yè)不是用來(lái)給自己看的所以我必需讓自己的網(wǎng)頁(yè)能夠兼顧這兩種情況，讓不同分辨率設(shè)置的網(wǎng)友都能夠看到一個(gè)排版美觀正確的網(wǎng)頁(yè)。下面就介紹幾種常用的方法，特別說(shuō)明一下除非你網(wǎng)站是藝術(shù)類的有特別需求，通常我都會(huì)首先照顧分辨率設(shè)置為800600大眾化規(guī)范。
網(wǎng)站開(kāi)發(fā)一、自然拉伸

如果你網(wǎng)站結(jié)構(gòu)沒(méi)有用到大量的圖形來(lái)銜接，主要由表格來(lái)定結(jié)構(gòu)，那么你就可以使用該方法。非常適用于主要由表格、文字來(lái)表達(dá)信息的簡(jiǎn)單的網(wǎng)頁(yè)頁(yè)面。制作表格時(shí)，只要你把表格的寬度屬性定義為100%表格就會(huì)根據(jù)分辨率的不同自行調(diào)整寬度。

網(wǎng)站開(kāi)發(fā)二、固定居中
800600分辨率下制作的網(wǎng)頁(yè)在1024768分辨率的機(jī)器上打開(kāi)，整個(gè)網(wǎng)頁(yè)就會(huì)跑到左邊；1024768分辨率的網(wǎng)頁(yè)在800600分辨率的機(jī)器上有時(shí)也會(huì)變得"不堪入目"兩種分辨率各做一個(gè)吧？做起來(lái)費(fèi)勁。所以目前普遍采用的方法是固定居中法！
現(xiàn)在大多數(shù)網(wǎng)民都還在用800*600分辨率，所以我一般可以以此分辨率為主。只要在網(wǎng)頁(yè)原代碼的后緊加一句前加一句

就OK不過(guò)有幾個(gè)問(wèn)題這是要注意一下，第一個(gè)要注意的上面說(shuō)到百分比的問(wèn)題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770如果你表格寬度設(shè)的百分比，那么使用大于800600像素時(shí)，網(wǎng)頁(yè)就會(huì)拉寬，這樣網(wǎng)頁(yè)可能會(huì)變形。中加入leftmargin=0即這種情況下，800600支持的表格寬度為780像素時(shí)不會(huì)出現(xiàn)滾動(dòng)條。還有一點(diǎn)要注意的不能用DW中的層來(lái)定位。

網(wǎng)站開(kāi)發(fā)三、兵分兩路
如果你網(wǎng)頁(yè)不經(jīng)常更新，而且對(duì)頁(yè)面效果極其在意，那好，就設(shè)計(jì)兩個(gè)頁(yè)面，分別對(duì)應(yīng)800600和1024768兩種分辨率。然后根據(jù)不同的分辨率進(jìn)行跳轉(zhuǎn)就行了
例如：
functredirectPag{
varurl_els="http://www.163.com/";
varurl_800x600="http://www.sohu.com/";
varurl_1024x768="http://www.sina.com.cn/";
varurl_1366x768="http://www.qq.com";
ifscreen.width==800&&screen.height==600
window.location.href=url_800x600;
elsifscreen.width==1024&&screen.height==768
window.location.href=url_1024x768;
elsifscreen.width==1366&&screen.height==768
window.location.href=url_1366x768;
else
window.location.href=url_else;

}

本文標(biāo)題：網(wǎng)站開(kāi)發(fā)：如何讓網(wǎng)頁(yè)自適應(yīng)電腦屏幕分辨率？
標(biāo)題URL：http://muchs.cn/news/224075.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、App開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、云服務(wù)器、全網(wǎng)營(yíng)銷推廣、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)