讓網(wǎng)頁自適應(yīng)客戶端分辨率
2024-03-19 分類： 網(wǎng)站建設(shè)
在1024*768或者800*600的分辨率下可以自動調(diào)整成適用于該客戶端分辨率的大小。
第一種方法：做一個網(wǎng)頁解決問題（長了點）
如果只是因為瀏覽者改變了瀏覽器的設(shè)置，或者因為瀏覽器不兼容，使自己精心制作的網(wǎng)頁變得"面目全非"，那多令人沮喪！下面我們以網(wǎng)頁愛好者的常用工具Dreamweaver（以下簡稱DW）為例，列出幾個網(wǎng)頁制作初學(xué)者較常見的網(wǎng)頁布局問題以及解決方法，希望對初學(xué)者們有所幫助。
一、消除任意縮放瀏覽器窗口對網(wǎng)頁的影響
一番辛苦做出來的網(wǎng)頁，在全屏狀態(tài)下瀏覽一切正常。但在改變?yōu)g覽窗口大小之后，網(wǎng)頁就變得"不堪入目"了，這是個很值得注意的問題。
問題的根源還得從網(wǎng)頁的布局說起，在DW中，網(wǎng)頁內(nèi)容的定位一般是通過表格來實現(xiàn)的，解決表格的問題也就成功了大半。
大家應(yīng)該注意到，在DW中表格屬性面板的高寬設(shè)定選擇上提供了兩種不同類型：百分比和像素值。百分比的使用將會產(chǎn)生前面說到的那個毛病。這里所說的百分比是指表格的高或?qū)捲O(shè)置為上層標(biāo)記所占區(qū)域高或?qū)挼陌俜直?，如在一個表格單元的寬度是600，在它里面嵌入了另外一個表格，表格寬度占表格單元的50%，則這個表格的寬度為300，依此類推，如果在一個表格不是嵌于另一個表格單元中，則其百分比是相對于當(dāng)時窗口的寬度的。IE瀏覽器中，隨便改動主頁窗口的大小時，表格的內(nèi)容也隨之錯位、變形，就是因為表格的百分比也要隨著窗口的大小而改變成相應(yīng)的百分比寬度。
自然，解決這個問題的辦法就是將表格寬度設(shè)置成固定寬度（也就是像素值）。另外如果外層表格已做好固定寬度設(shè)置，內(nèi)層表格也可以適當(dāng)使用百分比設(shè)置。清楚這個原則以后，如果出現(xiàn)類似的問題大家也知道怎么解決。
二、讓網(wǎng)頁居中
說到了窗口大小就會順著路子想到分辨率的問題，在800×600分辨率下制作的網(wǎng)頁在1024×768分辨率的機(jī)器上打開，整個網(wǎng)頁就會跑到左邊；1024×768分辨率的網(wǎng)頁在800×600分辨率的機(jī)器上有時也會變得"不堪入目"。兩種分辨率各做一個吧？做起來費時，看起來也費勁。怎么辦呢？
現(xiàn)在大多數(shù)網(wǎng)民都還在用800*600的分辨率，所以我們一般可以以此分辨率為主，要想讓網(wǎng)頁在1024*768時居中，只要在網(wǎng)頁原代碼的<body>后緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個就是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設(shè)的是百分比，那么使用大于800×600的像素時，網(wǎng)頁就會拉寬，這樣網(wǎng)頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時不會出現(xiàn)滾動條。還有一點要注意的是不能用DW中的層來定位。
大家都知道,在IE瀏覽器的功能設(shè)置中，有一個可以自由設(shè)置窗口內(nèi)容字體大小的功能，這樣由于不同訪問者的設(shè)置習(xí)慣不同，呈現(xiàn)在他們面前的網(wǎng)頁有時也會不不相同。比如你可能本來設(shè)計時用的是2號字體，結(jié)果由于用戶對瀏覽器的額外設(shè)定，變的更大了，這時你的網(wǎng)頁也可能變得"不堪入目"。雖然不是你的錯，但客戶是上帝。
如果使用了網(wǎng)頁中的CSS樣式表技術(shù)，就不會出現(xiàn)上述情況了。使用快捷鍵"Shift+F11"打開樣式表"CSS style"編輯器，在窗口中單擊鼠標(biāo)右鍵執(zhí)行"New CSS style..."命令新建一個樣式表，然后在給出的列表中選擇"類型"選項，定義文字屬性參數(shù)（一般文字的大小選擇12px較為適宜）。完成后選擇網(wǎng)頁編輯窗中的文本，單擊新的樣式表名稱，可以看到選中的文本發(fā)生了變化。預(yù)覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。
四、讓網(wǎng)頁適應(yīng)不同的瀏覽器
瀏覽器的格局現(xiàn)在是兩分天下，一分是IE，另一分是NetScape，在國內(nèi)Ie有絕對的占有率，在這種情況下我們設(shè)計的網(wǎng)頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網(wǎng)站，但只要注意以下幾點，做出來的網(wǎng)頁在各個瀏覽器都中能達(dá)到比較好的顯示效果：
不要混合使用層和表格排版，如果是父子關(guān)系，如層中表格，不在此原則范圍內(nèi)。
內(nèi)聯(lián)式的 CSS 在 Netscape Navigator 中經(jīng)常會出現(xiàn)問題，使用鏈?zhǔn)交騼?nèi)嵌式。
有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 里的效果。
對于只有幾個像素寬度或高度的層，改用圖片來實現(xiàn)。
避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。
第二種方法：做兩個適合不同分辨率的頁面，一個是800×600，一個是1024×768，在800×600的頁面中加入一下代碼就可以實現(xiàn)跳轉(zhuǎn)了：
解決分辨率問題在Dreamweaver中沒有此項功能，我們只能手動加入一段Javascript代碼。首先在change－ie.html或change－nc.html頁面代碼中的< head>和< /head>中加入以下代碼：
第一種方法：做一個網(wǎng)頁解決問題（長了點）
如果只是因為瀏覽者改變了瀏覽器的設(shè)置，或者因為瀏覽器不兼容，使自己精心制作的網(wǎng)頁變得"面目全非"，那多令人沮喪！下面我們以網(wǎng)頁愛好者的常用工具Dreamweaver（以下簡稱DW）為例，列出幾個網(wǎng)頁制作初學(xué)者較常見的網(wǎng)頁布局問題以及解決方法，希望對初學(xué)者們有所幫助。
一、消除任意縮放瀏覽器窗口對網(wǎng)頁的影響
一番辛苦做出來的網(wǎng)頁，在全屏狀態(tài)下瀏覽一切正常。但在改變?yōu)g覽窗口大小之后，網(wǎng)頁就變得"不堪入目"了，這是個很值得注意的問題。
問題的根源還得從網(wǎng)頁的布局說起，在DW中，網(wǎng)頁內(nèi)容的定位一般是通過表格來實現(xiàn)的，解決表格的問題也就成功了大半。
大家應(yīng)該注意到，在DW中表格屬性面板的高寬設(shè)定選擇上提供了兩種不同類型：百分比和像素值。百分比的使用將會產(chǎn)生前面說到的那個毛病。這里所說的百分比是指表格的高或?qū)捲O(shè)置為上層標(biāo)記所占區(qū)域高或?qū)挼陌俜直?，如在一個表格單元的寬度是600，在它里面嵌入了另外一個表格，表格寬度占表格單元的50%，則這個表格的寬度為300，依此類推，如果在一個表格不是嵌于另一個表格單元中，則其百分比是相對于當(dāng)時窗口的寬度的。IE瀏覽器中，隨便改動主頁窗口的大小時，表格的內(nèi)容也隨之錯位、變形，就是因為表格的百分比也要隨著窗口的大小而改變成相應(yīng)的百分比寬度。
自然，解決這個問題的辦法就是將表格寬度設(shè)置成固定寬度（也就是像素值）。另外如果外層表格已做好固定寬度設(shè)置，內(nèi)層表格也可以適當(dāng)使用百分比設(shè)置。清楚這個原則以后，如果出現(xiàn)類似的問題大家也知道怎么解決。
二、讓網(wǎng)頁居中
說到了窗口大小就會順著路子想到分辨率的問題，在800×600分辨率下制作的網(wǎng)頁在1024×768分辨率的機(jī)器上打開，整個網(wǎng)頁就會跑到左邊；1024×768分辨率的網(wǎng)頁在800×600分辨率的機(jī)器上有時也會變得"不堪入目"。兩種分辨率各做一個吧？做起來費時，看起來也費勁。怎么辦呢？
現(xiàn)在大多數(shù)網(wǎng)民都還在用800*600的分辨率，所以我們一般可以以此分辨率為主，要想讓網(wǎng)頁在1024*768時居中，只要在網(wǎng)頁原代碼的<body>后緊加一句<center>，</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下，第一個就是上面說到的百分比的問題，表格、單元格的寬度單位最好要使用像素單位，而不要用百分比。例如width=770。如果你的表格寬度設(shè)的是百分比，那么使用大于800×600的像素時，網(wǎng)頁就會拉寬，這樣網(wǎng)頁可能會變形。在<body>中加入leftmargin=0，即<body leftmargin=0>這種情況下，800×600支持的表格寬度為780像素時不會出現(xiàn)滾動條。還有一點要注意的是不能用DW中的層來定位。
<html>
<head></head>
<body?topmargin=0?leftmargin=0>
<center>
<table?cellspacing?cellpadding?width=760><tr><td></td></tr></table>
</center>
</body>
</html>
三、定義固定大小的文字大家都知道,在IE瀏覽器的功能設(shè)置中，有一個可以自由設(shè)置窗口內(nèi)容字體大小的功能，這樣由于不同訪問者的設(shè)置習(xí)慣不同，呈現(xiàn)在他們面前的網(wǎng)頁有時也會不不相同。比如你可能本來設(shè)計時用的是2號字體，結(jié)果由于用戶對瀏覽器的額外設(shè)定，變的更大了，這時你的網(wǎng)頁也可能變得"不堪入目"。雖然不是你的錯，但客戶是上帝。
如果使用了網(wǎng)頁中的CSS樣式表技術(shù)，就不會出現(xiàn)上述情況了。使用快捷鍵"Shift+F11"打開樣式表"CSS style"編輯器，在窗口中單擊鼠標(biāo)右鍵執(zhí)行"New CSS style..."命令新建一個樣式表，然后在給出的列表中選擇"類型"選項，定義文字屬性參數(shù)（一般文字的大小選擇12px較為適宜）。完成后選擇網(wǎng)頁編輯窗中的文本，單擊新的樣式表名稱，可以看到選中的文本發(fā)生了變化。預(yù)覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。
四、讓網(wǎng)頁適應(yīng)不同的瀏覽器
瀏覽器的格局現(xiàn)在是兩分天下，一分是IE，另一分是NetScape，在國內(nèi)Ie有絕對的占有率，在這種情況下我們設(shè)計的網(wǎng)頁只要兼容它就行了，但NetScape在國外還是有很多人使用，畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網(wǎng)站，但只要注意以下幾點，做出來的網(wǎng)頁在各個瀏覽器都中能達(dá)到比較好的顯示效果：
不要混合使用層和表格排版，如果是父子關(guān)系，如層中表格，不在此原則范圍內(nèi)。
內(nèi)聯(lián)式的 CSS 在 Netscape Navigator 中經(jīng)常會出現(xiàn)問題，使用鏈?zhǔn)交騼?nèi)嵌式。
有時需要在空層插入表格或者透明圖片，以保證在 Netscape Navigator 里的效果。
對于只有幾個像素寬度或高度的層，改用圖片來實現(xiàn)。
避免使用 W3C 組織不推薦的排版屬性，用 CSS 代替。
第二種方法：做兩個適合不同分辨率的頁面，一個是800×600，一個是1024×768，在800×600的頁面中加入一下代碼就可以實現(xiàn)跳轉(zhuǎn)了：
解決分辨率問題在Dreamweaver中沒有此項功能，我們只能手動加入一段Javascript代碼。首先在change－ie.html或change－nc.html頁面代碼中的< head>和< /head>中加入以下代碼：
?<?script?language=JavaScript>
<?!－－
function?redirectPage(){
var?url800x600=〃index－ie.html〃;?//定義兩個頁面，此處假設(shè)index－ex.html和1024－ie.html同change－ie.html在同一個目錄下
var?url1024x768=〃1024－ie.html〃;
if?((screen.width==800)?＆＆?(screen.height==600)) //在此處添加screen.width、screen.height的值可以檢測更多的分辨率
window.location.href=?url800x600;
else?if?((screen.width==1024)?＆＆?(screen.height==768))
window.location.href=url1024x768;
else?window.location.href=url800x600;
}
//?－－>
<?/script>
然后再在< body…>內(nèi)加入onLoad=〃redirectPage()〃
最后，同樣地，在< body>和< /body>之間加入以下代碼來顯示網(wǎng)頁的工作信息：
?<?script?language=JavaScript>
<?!－－
var?w=screen.width
var?h=screen.height
document.write(〃系統(tǒng)已檢測到您的分辨率為:〃);
document.write(〃<?font?size=3?color=red>〃);
document.write(w＋〃×〃＋h);
document.write(〃<?/font>〃);
document.write(〃正在進(jìn)入頁面轉(zhuǎn)換,請稍候…〃);
//?－－>
<?/script>
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
網(wǎng)頁名稱：讓網(wǎng)頁自適應(yīng)客戶端分辨率
網(wǎng)址分享：http://redsoil1982.com.cn/news3/320803.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、全網(wǎng)營銷推廣、自適應(yīng)網(wǎng)站、營銷型網(wǎng)站建設(shè)、微信小程序、云服務(wù)器
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- “兩區(qū)”建設(shè)乘“兩區(qū)”建設(shè)之風(fēng)，揚東城發(fā)展之帆 2024-03-19
- 化妝品品牌企業(yè)必備的網(wǎng)絡(luò)營銷推廣方式 2024-03-19
- 企業(yè)網(wǎng)站需要完善切勿隨意 2024-03-19
- 簡單就是良好的用戶體驗 2024-03-19
- 成都好的網(wǎng)站建設(shè)需要滿足哪些條件? 2024-03-19
- 草根談微信大號運營的幾點注意事項 2024-03-19
- 使用cpolar建立一個商業(yè)網(wǎng)站（2） 2024-03-19
- 新站優(yōu)化的幾點注意事項 2024-03-19
- 構(gòu)建云戰(zhàn)略時應(yīng)遵循的五個步驟 2024-03-19
- 新站上線后需要做這些SEO優(yōu)化工作 2024-03-19
- 上傳psd制作動畫的網(wǎng)站(psd文件制作動畫) 2024-03-19
- 分享小型電商應(yīng)該如何進(jìn)行產(chǎn)品選擇與規(guī)劃 2024-03-19
- 哈密??網(wǎng)站制作公司如何定制方案？ 2024-03-19
- 東方財富注冊“關(guān)燈吃面”商標(biāo) 2024-03-19
- 拉薩企業(yè)網(wǎng)站開發(fā)給用戶留下好印象 2024-03-19
- 優(yōu)化網(wǎng)站不可不知的常識 2024-03-19
- 美國服務(wù)器死機(jī)的解決方式 2024-03-19
- 你注意到移動端網(wǎng)站建設(shè)中這幾點了嗎？ 2024-03-19
- 網(wǎng)站建設(shè)怎么寫TDK？ 2024-03-19