css控制頁面再不同解析度下顯示相對大小

2022-03-11 12:13:49 字數 5758 閱讀 6350

1樓:

首先,你要確定你的body倆個引數

margin:0

padding:0

然後寬度設定成100%

高度的問題你只能設定一個最低高度,因為內容你無法控制,除非你想設成固定高度,但是你設成固定高度肯定就不能相容這倆個尺寸1280*1024:1024*768,所以你可以實現自適應寬度

2樓:匿名使用者

不能做到,首先要說明的是,網頁製作後必須經過不同解析度除錯效果。是要你的網頁適應大多數顯示器正常瀏覽。網頁設計好的寬度是固定的,不能象你那樣設定100%,否則就會內容錯位或者視窗下邊出現橫向滾動條。

現在主流網頁設計寬度在800-1000px之間,固定寬度值。然後讓內容居中,這樣在不同解析度的顯示器下**就正常了。和你相反高度應該按百分比設定,按內容多少自調節網頁高度。

都是根據內容多少自適應高度,幾乎沒有那個**高度固定然後用橫向滾動條來找寬度吧。

你可以到各**的首頁去看一看,基本都是寬度800-1000px,內容居中兩側留白(可以放懸浮廣告),整體高度不設定具體畫素。

.css是精確控制畫素的,試想你做出來的網頁畫素是固定的,不可能在解析度低的瀏覽器上按比例縮放**到相同效果。

3樓:野外負傷

所有寬度 和高度 用百分比或者em寫,不定義body的最大值或最小值。

4樓:

1.採用定長定寬的佈局。規劃好頁面的各部分元素大小。

精確到px。然後整體居中,兩側留白。這樣解析度不一樣,只會影響留白部分的大小。

居中部分在各解析度下顯示效果一致。

2.比較少用。就是採用流式佈局。

頁面的各部分都是按照百分比去設定的。這樣解析度不一樣的情況下。效果都是一致的。

但是比較難以掌控。編碼難度大,測試困難。因此較少採用。

3.另外,針對不同移動裝置下,不同解析度通常採用服務端判斷裝置型別,然後載入相應css去實現不同裝置訪問自適應

5樓:匿名使用者

這個可以通過佈局和樣式解決:

方法一:所有佈局用百分比佈局,這種方法是比較傳統的。

方法二:百分比和em(一個字元的單位)相結合的;

方法三:rem為單位來寫樣式,需要藉助js來根據解析度的大小調整rem;

方法四:佈局用rem單位,而字型用em.

第1、2兩種方法是比較傳統,網上隨便搜搜就找得到了;第3種開始用到的rem,rem是css3新出的一種樣式屬性單位,類似px;但是rem是可以人為設定大小的,也就是說rem這個單位的大小是可以設定,基於這個特性,再通過js來根據解析度控制這個rem的單位大小;

js**:

(function (doc, win) ;

if (!doc.addeventlistener) return;

win.addeventlistener(resizeevt, recalc, false);

doc.addeventlistener('domcontentloaded', recalc, false);

})(document, window);

這邊的40是rem的自己需要單位大小(自己根據需求設定的,如果需要甚至可以改成10);

這邊的1080是設計效果圖的大小,如果設計圖是以寬度為2000的話,那麼這邊的1080就改成2000;

而em用來做字型單位的話,就可以根據不同的顯示器(手機自身的設定)來顯示字型,不會出現字型大的離譜,或者小的看不見的狀況;

不過rem因為是css3的屬性,在pc端的相容性很差,不建議使用,但是移動端是非常適合的,總結就是pc端:方法

一、方法二,移動端:方法

三、方法四

6樓:匿名使用者

邊界設為左右自動上下自動

7樓:楓玲蝶子

哦,開始網頁載入慢了,就沒看到全部問題

8樓:匿名使用者

好像,很少看到有人去做,一般都是固定的980--1002

9樓:匿名使用者

在開啟的網頁區域按住ctrl不動 再滾動滑鼠輪 發現了麼?

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

10樓:八哥說科技

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

1、響應式佈局設計:

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

2、自適應網頁設計:

自適應網頁設計(adaptive web design)指能使網頁自適應顯示在不同大小終端裝置上新網頁設計方式及技術。

11樓:任霏部落格

html頁面可採用自適應佈局或者響應式佈局。

自適應佈局,使用百分比寬度來自適應螢幕大小。

響應式佈局,使用css的@media規則,根據不用螢幕大小範圍,編寫多個css樣式,來適應多種螢幕大小。

12樓:匿名使用者

這個不用管他!

雖然每個人的顯示器有大有小, 但是,你感覺看起來會很大或者很小,只是一個視覺差而已!

各人看自己的顯示器,習慣了就好!

當你看一個很大的東西,看習慣了之後, 然後再去看一個小的東西,你會覺得很小很小, 但多看幾天, 你會覺得,其實也差不多, 這就是視覺差!

沒必要刻意的去如何的來修正, 總之,習慣了就好!

你只要把你的html的總體寬度, 弄一個比較常規的尺寸即可!

一般是960或者950, 當然, 你也可以設定為滿屏!

這是基於pc**下, 如何你是做手機**, 那一般都是滿屏, 手機瀏覽的時候, 會自動適應手機螢幕的大小!

13樓:memory丶思憶

你所說的適應,是一種響應式架構。採用html5+css3可以完美的解決。不過你才學。不建議一開始就涉及到這種層次的問題。

你可以先把頁面設定為1200px。居中。960的寬度已經過時了。

現在主要是面向客戶的思想去編寫**架構。主流顯示器都在1200+,所以,我建議你寬度設定為1200px.事實也是如此。

我們公司現在的寬度基本都定義1200px.做響應式的除外。

你說的**是正常的。你站在地上,看掉在地上的一個硬幣。會感覺還ok。

是個硬幣大小。但是你站在5樓在去看硬幣,或許你就找不到硬幣的位置了。同理。

樓主不要糾結這些事了。

14樓:匿名使用者

一般會用一張比較大的背景圖,居中,兩邊過渡到一個純色或者漸變色,body就用這個純色或者漸變色做背景

15樓:匿名使用者

簡單暴力的方法,樓主你可以試試bootstrap柵格

html+css不同解析度的螢幕顯示的畫素大小不一樣,如何解決? 10

16樓:大風起兮

用bootstrap的柵格,簡單,好用。

div+css怎樣解決在不同螢幕大小下的顯示問題,我做的老師被覆蓋、重疊

17樓:匿名使用者

單純的用哪一種css寫法是不能夠實現的,百分比也只能解決部分問題,有些問題百分比還是解決不了。這些問題尤其在ie6中更為嚴重。

如果你要想實現不能解析度下效果實現統一,最好的辦法就是用兩套css。

你上面說的京東實際上它用了兩套css檔案,例如京東的產品頁,在1280以下解析度下頁面的寬度為980,而在1280以上解析度的顯示器上寬度設定的是1200。

你看一下產品頁的源**就知道,裡面那些

if (_sw >= 1280)

if (screen.width>=1280)標籤當中,如果瀏覽器不支援js,那麼直接載入預設的這套css資料夾。但是如果瀏覽器支援js,那麼他就會判斷顯示器解析度的寬度if (screen.

width>=1280),然後再載入相應的css。

18樓:匿名使用者

直接不要設定width和higth的值為固定值,設定成百分比的形式,之後就可以自動根據螢幕大小自適應了。

舉例:內容1

;內容2

;此時兩個div的總寬度就是當前螢幕的寬度了,可以根據實際需要適當的調整下。

19樓:灰原亞美

用百分比定義相對寬高

20樓:

用百分比定義寬高可以解決

21樓:匿名使用者

不同螢幕解析度不一樣可以講頁面的內容都設為百分比的形式

div+css佈局下,怎樣解決對不同解析度的適應問題

22樓:匿名使用者

我知道你是什麼意識 呵呵 同行哈 以前我學的時候也鬱悶 的 其實就下面兩個東西 。你需要的應該是第二個吧 第一個你也瞭解下 或許對你有幫助

絕對定位(absolute):將被賦予此定位方法的物件從文件流中拖出,使用left,right,top, bottom等屬性相對於其最接近的一個最有定位設定的父級物件進行絕對定位,如果物件的父級沒有設定定位屬性,即還是遵循html定位規則的,則依據 body 物件左上角作為參考進行定位。絕對定位物件可層疊,層疊順序可通過 z-index 屬性控制,z-index值為無單位的整數,大的在最上面,可以有負值(目前負值ff不支援)。

相對定位(relative):物件不可層疊,依據left,right,top,bottom等屬性在正常文件流中偏移自身位置。同樣可以用z-index分層設計。

23樓:匿名使用者

通常**不太要求自適應的問題,因為大的主體寬度是固定的,只需要把主體居中,背景做平鋪即可;即使要做自適應,一般也就是用寬度設為百分比,或者是一部分固定寬度一部分設為百分比;

24樓:匿名使用者

一般使用居中就ok了 然後就是寬度設定合適 其實和**的使用是一樣的 區別不大 最好先建立一個大的底層 定位大的底層的位置居中 然後將其他的層按照底層定位就ok了

25樓:匿名使用者

一般的解決方案。採用定長定寬的佈局。規劃好頁面的各部分元素大小。

精確到px。然後整體居中,兩側留白。這樣解析度不一樣,只會影響留白部分的大小。

居中部分在各解析度下顯示效果一致。

另一種解決方案比較少用。就是採用流式佈局。頁面的各部分都是按照百分比去設定的。

這樣解析度不一樣的情況下。效果都是一致的。但是比較難以掌控。

編碼難度大,測試困難。因此較少採用。

另外,針對不同移動裝置下,不同解析度通常採用服務端判斷裝置型別,然後載入相應css去實現不同裝置訪問自適應。

div+css佈局下,怎樣解決對不同解析度的適應問題?

26樓:匿名使用者

一般的解決方案。採用定長定寬的佈局。規劃好頁面的各部分元素大小。

精確到px。然後整體居中,兩側留白。這樣解析度不一樣,只會影響留白部分的大小。

居中部分在各解析度下顯示效果一致。

另一種解決方案比較少用。就是採用流式佈局。頁面的各部分都是按照百分比去設定的。

這樣解析度不一樣的情況下。效果都是一致的。但是比較難以掌控。

編碼難度大,測試困難。因此較少採用。

另外,針對不同移動裝置下,不同解析度通常採用服務端判斷裝置型別,然後載入相應css去實現不同裝置訪問自適應。

css怎麼控制字型的位置css中如何指定文字在圖片中的位置

需要準備的材料分別有 電腦 瀏覽器 html編輯器。1 首先,開啟html編輯器,新建html檔案,例如 index.html。2 在index.html中的標籤中,輸入css 獲取更多 css控制字型的方法 設定字號 font size 12px 設定字色 color 0000 設定字型 font...

html頁面是先讀js檔案,後讀css檔案吧

如果載入的檔案都在裡,誰在前面一般先讀誰 如果裡只放了css js 檔案在頁面所有內容的最後,那就是先讀css 一般都是後著較為常用,是為了防止網速過慢時頁面載入長時間空白 誰在上面先讀誰,一般建議css放在js上面 瀏覽器是從上往下載入編譯的 誰在誰上面 先讀誰 你好 dom是從上copy往下開始...

怎麼用css讓整個table位置頁面水平居中

需要準備的材料分別有 電腦 chrome瀏覽器 html編輯器。1 首先,開啟html編輯器,新建一個html檔案,例如 index.html。2 其次,在index.html中的標籤中,輸入css table body。3 最後,瀏覽器執行index.html頁面,此時會發現通過用css讓整個ta...