如何讓網頁自適應電腦螢幕解析度

2021-07-04 02:38:29 字數 1052 閱讀 6528

很多人會遇到這樣的問題,當你在自己的電腦上精心製作好網頁,卻發現在別人的不同解析度的電腦上瀏覽你的頁面時,自己的網頁排版亂得一塌糊塗,或者被拉伸,或者被壓縮,要不就是不能完整顯示在螢幕內。這是為什麼呢?因為通常初學者朋友都按照自己的螢幕解析度對網頁進行設計,但是卻沒有考慮到網友們可能使用了別的螢幕解析度。

目前,網友們上網通常會採用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兩種解析度。然後根據不同的解析度進行跳轉就行了。

例如:

function redirectpage()

PC端網頁自適應不用解析度大小螢幕

由於 media 這一屬性太複雜 所以在一般的公司網頁製作中 我們可以直接根據瀏覽器視窗的大小來做自適應 var height window.innerheight document.documentelement document.documentelement.clientheight docu...

電腦不同的解析度自適應顯示

用乙個簡單地例子來說一下,首先看一下源 生活中總用一些人會擾亂你的心緒,只要心裡有一方淨土就可以保持純潔。接下來是對樣式進行的修飾 box 最小寬度的適應 media screen and min width 1201px 當螢幕寬度最大為1200 media screen and max widt...

Qt實現多螢幕多解析度自適應

這裡僅大概描述一下實現思路。前段時間寫了乙個軟體,視窗內有自繪內容。自繪內容裡面用的長度單位都是畫素。可想而知,在開發者的電腦螢幕上大小都是符合要求的。到這一步都沒問題。軟體開發完成後發給客戶,客戶在他的電腦上執行,也沒問題,畢竟解析度差不多。偶然一次使用配有高解析度顯示器電腦執行軟體,在4k屏下,...