當前位置:首頁 » 電腦辦公 » 怎樣讓網頁適應不同解析度的電腦
擴展閱讀
怎樣管理蘋果手機隱私 2024-11-19 02:35:23
用手機怎樣選手機號碼 2024-11-19 02:35:22

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

發布時間: 2022-07-29 07:00:42

⑴ HTML頁面是如何適應不同解析度的顯示器

HTML頁面何適應不同解析度的顯示器可以通過:響應式布局、自適應網頁設計等方法:

1、響應式布局設計:

響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗,響應式布局就是實現不同屏幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。一個網站能夠兼容多個終端,而不是為了每一個終端做一個特定的版本。

2、自適應網頁設計:

自適應網頁設計(Adaptive Web Design)指能使網頁自適應顯示在不同大小終端設備上新網頁設計方式及技術。

(1)怎樣讓網頁適應不同解析度的電腦擴展閱讀:

響應式布局與自適應布局的區別:

1、自適應布局通過檢測視口解析度,來判斷當前訪問的設備是:pc端、平板、手機,從而請求服務層,返回不同的頁面;響應式布局通過檢測視口解析度,針對不同客戶端在客戶端做代碼處理,來展現不同的布局和內容。

2、自適應布局需要開發多套界面,而響應式布局只需要開發一套界面就可以了。

3、自適應對頁面做的屏幕適配是在一定范圍:比如pc端一般要大於1024像素,手機端要小於768像素。而響應式布局是一套頁面全部適應。

4、自適應布局如果屏幕太小會發生內容過於擁擠。而響應式布局正是為了解決這個問題而衍生出的概念,它可以自動識別屏幕寬度並做出相應調整的網頁設計。

⑵ 如何讓頁面適應不同的解析度。要詳細

定義div塊,把body之下的所有部分全部放在大的div塊裡面,設定div的寬度為1024px
也就是標屏顯示器標准解析度,寬屏則是1280px
或者用table標簽也可以,而且效果其實還好點。

⑶ 如何使網頁自適應電腦屏幕解析度,不管多大的解析度都是全屏顯示的

1.首先,在網頁代碼的頭部,加入一行viewport元標簽。
viewport是網頁默認的寬度和高度,上面這行代碼的意思是,網頁寬度默認等於屏幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小占屏幕面積的100%。
所有主流瀏覽器都支持這個設置,包括IE9,對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
2、不使用絕對寬度由於網頁會根據屏幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。具體說,CSS代碼不能指定像素寬度:width:xxx px;
只能指定百分比寬度:width: xx%;或者width:auto;
3、相對大小的字體
字體也不能使用絕對大小(px),而只能使用相對大小(em)。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
上面的代碼指定,字體大小是頁面默認大小的100%,即16像素。
h1 {
font-size: 1.5em;
}
然後,h1的大小是默認大小的1.5倍,即24像素(24/16=1.5)。
small {
font-size: 0.875em;
}
small元素的大小是默認大小的0.875倍,即14像素(14/16=0.875)。

⑷ 如何讓網站自動適應電腦的解析度每個電腦的解析度不

在網頁中,我們一般是通過表格來布局的。 只要將表格的寬度和高度按照百分比而非像素來設置即可在瀏覽時自動適應電腦屏幕解析度。

⑸ 怎麼設置網頁自動適應屏幕解析度

打開瀏覽器,選擇菜單欄中的查看--〉縮放--〉自定義,把網頁縮放到80%就可以,現在的網頁一般是按照1024的顯示器製作的,你縮放成80%正好適合800的解析度

⑹ 如何讓網頁自適應解析度

在1024*768或者800*600的解析度下可以自動調整成適用於該客戶端解析度的大小。
第一種方法:做一個網頁解決問題(長了點)
如果只是因為瀏覽者改變了瀏覽器的設置,或者因為瀏覽器不兼容,使自己精心製作的網頁變得"面目全非",那多令人沮喪!下面我們以網頁愛好者的常用工具Dreamweaver(以下簡稱DW)為例,列出幾個網頁製作初學者較常見的網頁布局問題以及解決方法,希望對初學者們有所幫助。
一、消除任意縮放瀏覽器窗口對網頁的影響
一番辛苦做出來的網頁,在全屏狀態下瀏覽一切正常。但在改變瀏覽窗口大小之後,網頁就變得"不堪入目"了,這是個很值得注意的問題。
問題的根源還得從網頁的布局說起,在DW中,網頁內容的定位一般是通過表格來實現的,解決表格的問題也就成功了大半。
大家應該注意到,在DW中表格屬性面板的高寬設定選擇上提供了兩種不同類型:百分比和像素值。百分比的使用將會產生前面說到的那個毛病。這里所說的百分比是指表格的高或寬設置為上層標記所佔區域高或寬的百分比,如在一個表格單元的寬度是600,在它裡面嵌入了另外一個表格,表格寬度占表格單元的50%,則這個表格的寬度為300,依此類推,如果在一個表格不是嵌於另一個表格單元中,則其百分比是相對於當時窗口的寬度的。IE瀏覽器中,隨便改動主頁窗口的大小時,表格的內容也隨之錯位、變形,就是因為表格的百分比也要隨著窗口的大小而改變成相應的百分比寬度。
自然,解決這個問題的辦法就是將表格寬度設置成固定寬度(也就是像素值)。另外如果外層表格已做好固定寬度設置,內層表格也可以適當使用百分比設置。清楚這個原則以後,如果出現類似的問題大家也知道怎麼解決。
二、讓網頁居中
說到了窗口大小就會順著路子想到解析度的問題,在800×600解析度下製作的網頁在1024×768解析度的機器上打開,整個網頁就會跑到左邊;1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧?做起來費時,看起來也費勁。怎麼辦呢?
現在大多數網民都還在用800*600的解析度,所以我們一般可以以此解析度為主,要想讓網頁在1024*768時居中,只要在網頁原代碼的<body>後緊加一句<center>,</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下,第一個就是上面說到的百分比的問題,表格、單元格的寬度單位最好要使用像素單位,而不要用百分比。例如width=770。如果你的表格寬度設的是百分比,那麼使用大於800×600的像素時,網頁就會拉寬,這樣網頁可能會變形。在<body>中加入leftmargin=0,即<body leftmargin=0>這種情況下,800×600支持的表格寬度為780像素時不會出現滾動條。還有一點要注意的是不能用DW中的層來定位。

<html>
<head></head>
<body topmargin=0 leftmargin=0>
<center>
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
</center>
</body>
</html>

三、定義固定大小的文字
大家都知道,在IE瀏覽器的功能設置中,有一個可以自由設置窗口內容字體大小的功能,這樣由於不同訪問者的設置習慣不同,呈現在他們面前的網頁有時也會不不相同。比如你可能本來設計時用的是2號字體,結果由於用戶對瀏覽器的額外設定,變的更大了,這時你的網頁也可能變得"不堪入目"。雖然不是你的錯,但客戶是上帝。
如果使用了網頁中的CSS樣式表技術,就不會出現上述情況了。使用快捷鍵"Shift+F11"打開樣式表"CSS style"編輯器,在窗口中單擊滑鼠右鍵執行"New CSS style..."命令新建一個樣式表,然後在給出的列表中選擇"類型"選項,定義文字屬性參數(一般文字的大小選擇12px較為適宜)。完成後選擇網頁編輯窗中的文本,單擊新的樣式表名稱,可以看到選中的文本發生了變化。預覽時試試定義的文本字體尺寸還會不會隨瀏覽器的選擇字體大小而改變。
四、讓網頁適應不同的瀏覽器
瀏覽器的格局現在是兩分天下,一分是IE,另一分是NetScape,在國內Ie有絕對的佔有率,在這種情況下我們設計的網頁只要兼容它就行了,但NetScape在國外還是有很多人使用,畢竟它是瀏覽器的元老。
雖然沒有辦法做出讓所有瀏覽器都兼容的網站,但只要注意以下幾點,做出來的網頁在各個瀏覽器都中能達到比較好的顯示效果:
不要混合使用層和表格排版,如果是父子關系,如層中表格,不在此原則范圍內。
內聯式的 CSS 在 Netscape Navigator 中經常會出現問題,使用鏈式或內嵌式。
有時需要在空層插入表格或者透明圖片,以保證在 Netscape Navigator 里的效果。
對於只有幾個像素寬度或高度的層,改用圖片來實現。
避免使用 W3C 組織不推薦的排版屬性,用 CSS 代替。
第二種方法:做兩個適合不同解析度的頁面,一個是800×600,一個是1024×768,在800×600的頁面中加入一下代碼就可以實現跳轉了:

解決解析度問題在Dreamweaver中沒有此項功能,我們只能手動加入一段Javascript代碼。首先在change-ie.html或change-nc.html頁面代碼中的< head>和< /head>中加入以下代碼:
< script language=JavaScript>
< !--
function redirectPage(){
var url800x600=〃index-ie.html〃; //定義兩個頁面,此處假設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…>內加入onLoad=〃redirectPage()〃

⑺ 如何使網頁自適應電腦屏幕解析度

在1024*768或者800*600的解析度下可以自動調整成適用於該客戶端解析度的大小。 方法:做一個網頁解決問題 如果只是因為瀏覽者改變了瀏覽器的設置,或者因為瀏覽器不兼容,使自己精心製作的網頁變得"面目全非",那多令人沮喪!下面我們以網頁愛好者的常用工具Dreamweaver(以下簡稱DW)為例,列出幾個網頁製作初學者較常見的網頁布局問題以及解決方法,希望對初學者們有所幫助。 一、消除任意縮放瀏覽器窗口對網頁的影響 一番辛苦做出來的網頁,在全屏狀態下瀏覽一切正常。但在改變瀏覽窗口大小之後,網頁就變得"不堪入目"了,這是個很值得注意的問題。 問題的根源還得從網頁的布局說起,在DW中,網頁內容的定位一般是通過表格來實現的,解決表格的問題也就成功了大半。

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

以oppo R9 plus手機為例:

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

⑼ 怎麼讓網頁自動適應用戶電腦的解析度

網友們上網通常會採用800×600、1024×768兩種解析度, 網頁不是用來給自己看的,所以必須讓自己做的網頁能夠兼顧這兩種情況,讓不同解析度設置的網友都能夠看到一個排版美觀正確的網頁。下面就介紹幾種常用的方法,特別說明一下除非網站是藝術類的,有特別需求,通常都會首先照顧解析度設置為800×600的大眾化標准。
一、 自然拉伸
如果你的網站結構沒有用到大量的圖形來銜接,主要由表格來定結構,那麼你就可以使用該方法。非常適用於主要由表格、文字來表達信息的簡單的網頁頁面。製作表格時,只要你把表格的寬度屬性定義為100% ,表格就會根據解析度的不同自行調整寬度。

二、 固定居中
在800×600解析度下製作的網頁在1024×768解析度的機器上打開,整個網頁就會跑到左邊;1024×768解析度的網頁在800×600解析度的機器上有時也會變得"不堪入目"。兩種解析度各做一個吧?做起來費勁。所以目前普遍採用的方法是固定居中法!
現在大多數網民都還在用800*600的解析度,所以我們一般可以以此解析度為主。只要在網頁原代碼的<body>後緊加一句<center>,</body>前加一句</center>就OK了。不過有幾個問題這是要注意一下,第一個要注意的是上面說到的百分比的問題,表格、單元格的寬度單位最好要使用像素單位,而不要用百分比。例如width=770。如果你的表格寬度設的是百分比,那麼使用大於800×600的像素時,網頁就會拉寬,這樣網頁可能會變形。在<body>中加入leftmargin=0,即<body leftmargin=0>這種情況下,800×600支持的表格寬度為780像素時不會出現滾動條。還有一點要注意的是不能用DW中的層來定位。

三、 兵分兩路
如果你的網頁不經常更新,而且對頁面效果極其在意,那好,你就設計兩個頁面,分別對應800×600和1024×768兩種解析度。然後根據不同的解析度進行跳轉就行了。
例如:
<script LANGUAGE="JavaScript">
function redirectPage() {
var url_else = "http://www.163.com/";
var url_800x600 = "http://www.sohu.com/";
var url_1024x768 = "http://www.sina.com.cn/";
var url_1366x768 = "http://www.qq.com";
if ((screen.width == 800) && (screen.height == 600))
window.location.href= url_800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url_1024x768;
else if ((screen.width == 1366) && (screen.height == 768))
window.location.href= url_1366x768;
else
window.location.href= url_else;
}
</script>

⑽ 怎樣使網頁適應不同解析度的顯示器

你打開一下網易、新浪等網頁,你會發現其實他們也不正常~

我的顯示是22寸寬頻的,我設置的更寬,那些網站全部只顯示1027*768,兩邊都空起,我現在是用遨遊分屏顯示,同時開兩個頁面。

你可以學習那些行業的大家,比如網易他們,在網頁裡面使用代碼,固定只顯示1024*768,大屏幕上顯示空白,小屏幕上左右滾動累死人。

你也可以查看一些外國人的網站,比如www.apache.org、www.php.net,他們的網站寬屏幕下也是滿的,我喜歡那樣的網站。