如何使網頁在不同的解析度的電腦上不變形

2022-02-14 21:52:02 字數 2659 閱讀 3478

1樓:我是舞二

網友們上網通常會採用800×600、1024×768兩種解析度, 網頁不是用來給自己看的,所以必須讓自己做的網頁能夠兼顧這兩種情況,讓不同解析度設定的網友都能夠看到乙個排版美觀正確的網頁。下面就介紹幾種常用的方法,特別說明一下除非**是藝術類的,有特別需求,通常都會首先照顧解析度設定為800×600的大眾化標準。

一、 自然拉伸

如果你的**結構沒有用到大量的圖形來銜接,主要由**來定結構,那麼你就可以使用該方法。非常適用於主要由**、文本來表達資訊的簡單的網頁頁面。製作**時,只要你把**的寬度屬性定義為100% ,**就會根據解析度的不同自行調整寬度。

二、 固定居中

在800×600解析度下製作的網頁在1024×768解析度的機器上開啟,整個網頁就會跑到左邊;1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做乙個吧?做起來費勁。

所以目前普遍採用的方法是固定居中法!

現在大多數網民都還在用800*600的解析度,所以我們一般可以以此解析度為主。只要在網頁原**的後緊加一句,前加一句就ok了。不過有幾個問題這是要注意一下,第乙個要注意的是上面說到的百分比的問題,**、單元格的寬度單位最好要使用畫素單位,而不要用百分比。

例如width=770。如果你的**寬度設的是百分比,那麼使用大於800×600的畫素時,網頁就會拉寬,這樣網頁可能會變形。在中加入leftmargin=0,即這種情況下,800×600支援的**寬度為780畫素時不會出現滾動條。

還有一點要注意的是不能用dw中的層來定位。

三、 兵分兩路

如果你的網頁不經常更新,而且對頁面效果極其在意,那好,你就設計兩個頁面,分別對應800×600和1024×768兩種解析度。然後根據不同的解析度進行跳轉就行了。例如:

2樓:族諾子悠

最高端的body標籤,還有最高端別的div用width:100%;可以加上padding:0px; margin:0px;

如果還不可以的話使用$(window).width()可以得到螢幕寬度畫素然後像這樣:

$(document).ready(function());

});function resizehtml()以上需要jquery支援,要匯入一下jquery.js

3樓:匿名使用者

一般兩個辦法

1.選乙個比較低的解析度作為基準,現在一般就是1024*768,這樣如果解析度大了,網頁就居中了,一般沒問題

2 布局和定位按百分比來,不按畫素。

上面那段是針對不同ie版本的處理,就是載入相應的css

怎麼讓網頁適應不同解析度的電腦?

4樓:橘落淮南常成枳

以oppo r9 plus手機為例:

1、手機開啟瀏覽器後,點按中間的[3]。

2、單擊中間位置的[3]後,單擊內部的[設定。

3、點選[設定]後,繼續點選[主頁]。

4、這樣,如果沒有問題,啟動[網頁自適應螢幕]以使網頁自動適應不同的顯示「解析度」。

5樓:小炫馬扎

網友們上網通常會採用800×600、1024×768兩種解析度, 網頁不是用來給自己看的,所以必須讓自己做的網頁能夠兼顧這兩種情況,讓不同解析度設定的網友都能夠看到乙個排版美觀正確的網頁。下面就介紹幾種常用的方法,特別說明一下除非**是藝術類的,有特別需求,通常都會首先照顧解析度設定為800×600的大眾化標準。

一、 自然拉伸

如果你的**結構沒有用到大量的圖形來銜接,主要由**來定結構,那麼你就可以使用該方法。非常適用於主要由**、文本來表達資訊的簡單的網頁頁面。製作**時,只要你把**的寬度屬性定義為100% ,**就會根據解析度的不同自行調整寬度。

二、 固定居中

在800×600解析度下製作的網頁在1024×768解析度的機器上開啟,整個網頁就會跑到左邊;1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做乙個吧?做起來費勁。

所以目前普遍採用的方法是固定居中法!

現在大多數網民都還在用800*600的解析度,所以我們一般可以以此解析度為主。只要在網頁原**的後緊加一句,前加一句就ok了。不過有幾個問題這是要注意一下,第乙個要注意的是上面說到的百分比的問題,**、單元格的寬度單位最好要使用畫素單位,而不要用百分比。

例如width=770。如果你的**寬度設的是百分比,那麼使用大於800×600的畫素時,網頁就會拉寬,這樣網頁可能會變形。在中加入leftmargin=0,即這種情況下,800×600支援的**寬度為780畫素時不會出現滾動條。

還有一點要注意的是不能用dw中的層來定位。

三、 兵分兩路

如果你的網頁不經常更新,而且對頁面效果極其在意,那好,你就設計兩個頁面,分別對應800×600和1024×768兩種解析度。然後根據不同的解析度進行跳轉就行了。例如:

6樓:友同標兵

如果是使用**進行布局的話,可以使用百分比來約束大小,從而可以實現解析度自適應.但這種做法可能會導致很多不可預知的後果,如果使用者把視窗調得很小,網頁也會縮小,十分難看.不建議這樣做.

推薦的做法:使用css進行布局,用百分比進行約束,但給每乙個層乙個最小的寬度(min-height屬性),這樣就可以使得頁面可以自動適應比最小寬度寬的解析度,但不會比最小寬度小.這樣就可以使得網頁既有一定的靈活性,又不至於靈活得失控.

關於手機與電腦解析度的問題,手機螢幕解析度和電腦解析度一致嗎

全面分析解析度的那些事 最佳 距離不一樣啊,電腦螢幕要看清細節你一般是離多遠看?手機螢幕你要看清細節一般是多遠距離呢?那麼你用1280x720 的手機。去全屏看一張 1024x768的 然後再在電腦上全屏看一下同樣的一張 試試。手機的應該模糊感比較強烈才對。演算法是一樣的,原因比較多1 人眼識別有限...

解析度的單位是什麼 解析度單位是什麼?

1 解析度的單位有四種,分別為點每英吋dpi 線每英吋lpi 畫素每英吋ppi以及畫素每度ppd。解析度決定了點陣圖影象細節的精細程度。顯示器可顯示的畫素越多,畫面就越精細,同樣的螢幕區域內能顯示的資訊也越多。3 解析度,又稱解析度 解像度,可以細分為顯示解析度 影象解析度 列印解析度和掃瞄解析度等...

cf的解析度是多少,cf的解析度是多少?

大部分電腦解析度為1024 768,也有部分為800 600都可以。調節方式如下 1 首先需要登入cf,進入到首頁。在這個介面是無法調整解析度的,選擇乙個頻道進入即可。2 之後在這個介面,點選右上角的 設定 按鈕。3 之後彈出乙個設定視窗,在上方點選 畫面 選項,如圖所示。4 之後在裡面遊戲解析度後...