靜態,自適應,流式,響應式四種網頁佈局有什麼區別

2021-03-11 22:16:47 字數 3933 閱讀 7509

1樓:匿名使用者

做好復的html頁面都是靜態的制

你所說的靜態bai應該是固定值du

靜態:比如谷底固定好zhidiv的寬度和高度[偏向理解dao]自適應:也就是按照你的瀏覽器寬度自動縮小放大流式:

也就是div自行排列 比如[div 寬是100px 那麼我瀏覽器寬是500px 我們可以排列5個div 如果瀏覽器寬是300px 那麼div就會自動排列成2行 第一行是3個div 第二行是2個div]

響應式:藉助css3中的media queries 響應**查詢這個標籤來達到判斷解析度大小來執行css中的樣式**[早期做響應式的話 使用js來判斷]

像這樣**: ipbun.** 就是響應式的

2樓:星際奧雲ipfs礦機

響應式與bai

自適應的原理是相du似的,都是檢測裝置,根據不zhi同的裝置採用

dao不回同的css,而且css都是採用的百分比的答,而不是固定的寬度。

不同點是響應式的模板 在不同的裝置上看上去是不一樣的,會隨著裝置的改變而改變展示樣式。

而自適應不會,所有的裝置看起來都是一套的模板,不過是長度或者**變小了,不會根據裝置採用不同的展示樣式。

流式就是採用了一些設定,當寬度大於多少時怎麼展示,小於多少時怎麼展示,而且展示的方式向水流一樣,一部分一部分的載入。

靜態的就是採用固定寬度的了。

什麼是響應式網頁佈局

3樓:匿名使用者

「響應式佈局」已經成為現今**建設方案中的熱門術語,隨著html5技術的發展,它將很快從一種趨勢變為常規。但目前,很多客戶,甚至網際網路從業者,並沒有完全認識響應式佈局的本質,他們經常被以下誤區所迷惑:誤區一:

只要是「pc端+移動端」的**就是響應式佈局首先,我們要明確一點,採用響應式佈局的**,無論在哪個終端,都是同一個**,且都通過同一個域名來開啟和顯示**內容。它會根據終端螢幕的尺寸,智慧調整排版佈局,以達到最佳瀏覽效果。事實上,很多**是通過在pc端和移動端搭建兩個不同的**,併為它們分別繫結兩個域名,然後,通過對終端裝置的判斷,來決定開啟哪一個**更為合適。

類似於這種建站方式,我們稱之為「偽響應式」,因為它本質兩個不同的**而已。顯然,偽響應式的技術含量很低,自然建站成本也低。但它對後期**的維護和擴充套件也會產生一定的***,因為你需要維護兩個甚至的**。

不過這並不是不可接受的,在建站預算有限的情況下,這也不失為一個折中的選擇。當然,如果採用響應式佈局,不僅可以使**變得更加輕量,而且,不同終端上統一的設計風格,會給瀏覽者增添的信任感。誤區二:

響應式佈局**,就是移動端的**我們早在《響應式佈局的設計思路》一文中就提到過,不能一味地認為響應式佈局就是專門為移動建站而設計的。的確,響應式佈局是在移動網際網路誕生之後才出現的,最初的目的也是為了讓**版面對移動端可以表現的更為友好。但事實上,響應式佈局是針對**的一種製作方案,並不是針對專門的某個終端而設計的。

它可以讓**適應任何一個終端,而不是在每個終端上去開發不同的**。所以,你可以不必糾結某個響應式**到底是pc站,還是移動站,只要它能夠響應各種終端,為訪客帶來最好的使用者體驗,就足夠了。當然,你也可以根據使用者群的不同,為pc設計一套響應式**,再為手機設計一套響應式**,讓兩個**都可以完美響應各種終端裝置。

誤區三:響應式佈局就是做2套**佈局很多人認為響應式**就是做一套pc端的佈局版式,再做一套移動端的佈局版式,有2套佈局就算響應式了。實際上這只是最初級的響應式佈局,它甚至還不能很好地響應不同終端。

如果我們要做的更為精細,或許要考慮pc端多種尺寸的螢幕,比如19寸、23寸,或者更大一些的螢幕,是不是要做一些佈局微調,或設計出不同的佈局方案。移動端也是一樣,我們可以為pad、手機、iwatch、gglass等裝置,設計不同的佈局。甚至還可以考慮橫屏和豎屏不同的顯示方案。

當然,這麼做成本會大很多,但也說明響應式並不僅僅侷限於2套**的佈局。

4樓:匿名使用者

響應式佈局是ethan marcotte在2023年5月份提出的一個概念,簡而言之,就是一個**能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。

響應式佈局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗,而且隨著目前大螢幕移動裝置的普及,用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅看到很多的創新,還看到了一些成形的模式。

靜態、自適應、流式、響應式四種網頁佈局有什麼區別?

5樓:寶貝lj愛你

1、靈活性不同:

靜態佈局:毫無靈活性可言,目前已逐漸被淘汰。

自適應佈局:靜態佈局的升級版,因其強大的靈活性,已逐漸成為高階網頁的代名詞。

流式佈局:靈活性更高,可適用於其他三種**佈局。

響應式佈局:自適應佈局的升級版,響應式**要普遍適應市面上各類螢幕,開發難度和工作量都是非常大的,開發**自然比普通**高。

2、設計方法不同:

靜態佈局:居中佈局,所有樣式使用絕對寬度/高度(px),設計一個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分。

自適應佈局:使用 @media **查詢給不同尺寸和介質的裝置切換不同的樣式。

流式佈局:使用百分比定義寬度,高度大都是用px來固定,可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整,儘可能的適應各種解析度。

響應式佈局:**查詢+流式佈局。使用@media**查詢和網格系統配合相對佈局單位進行佈局,就是綜合響應式、流動等上述技術通過 css 給單一網頁不同裝置返回不同樣式的技術統稱。

6樓:楚軒的眼鏡

靜態佈局(static layout)

即傳統web設計,對於pc設計一個layout,在螢幕寬高有調整時,使用橫向和豎向的滾動條來查閱被遮掩部分;

對於移動裝置,單獨設計一個佈局,使用不同的域名如wap.或m.。

自適應佈局(adaptive layout)

自適應佈局(adaptive)的特點是分別為不同的螢幕解析度定義佈局。佈局切換時頁面元素髮生改變,但在每個佈局中,頁面元素不隨視窗大小的調整發生變化。

你可以把自適應佈局看作是靜態佈局的一個系列。

流式佈局(liquid layout)

流式佈局(liquid)的特點(也叫"fluid") 是頁面元素的寬度按照螢幕進行適配調整,主要的問題是如果螢幕尺度跨度太大,那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。

響應式佈局(responsive layout)

分別為不同的螢幕解析度定義佈局,同時,在每個佈局中,應用流式佈局的理念,即頁面元素寬度隨著視窗調整而自動適配。

可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。

恩恩大概就是這樣。

7樓:自由的人

響應式與自適應的原理是相似的,都是檢測裝置,根據不同的裝置採用不同的css,而且css都是採用的百分比的,而不是固定的寬度,不同點是響應式的模板在不同的裝置上看上去是不一樣的,會隨著裝置的改變而改變展示樣式,而自適應不會,所有的裝置看起來都是一套的模板,不過是長度或者**變小了,不會根據裝置採用不同的展示樣式,流式就是採用了一些設定,當寬度大於多少時怎麼展示,小於多少時怎麼展示,而且展示的方式向水流一樣,一部分一部分的載入,靜態的就是採用固定寬度的了。

8樓:匿名使用者

做好的html頁面都是靜態的

你所說的靜態應該是固定值

靜態:比如谷底固定好div的寬度和高度[偏向理解]自適應:也就是按照你的瀏覽器寬度自動縮小放大流式:

也就是div自行排列 比如[div 寬是100px 那麼我瀏覽器寬是500px 我們可以排列5個div 如果瀏覽器寬是300px 那麼div就會自動排列成2行 第一行是3個div 第二行是2個div]

響應式:藉助css3中的media queries 響應**查詢這個標籤來達到判斷解析度大小來執行css中的樣式**[早期做響應式的話 使用js來判斷]

像這樣**: ipbun.** 就是響應式的

寬度動態自適應的td裡面input

設一下display block試一下 span本身就是自適應寬度。你把裡邊那層去掉就行了。還有,樓主,你到底想讓文字適應寬度還是想讓寬度適應文字?如果是寬度去適應文字的話,你把它的寬度調成1就行了,文字多了自然會把.input和span的寬度不一致 本來就不一樣,span是內聯元素,如果沒有設定d...

誰用過汽車的自適應巡航acc功能

你好!我是別克昂科威,在高速上用a 功能,既省油又舒服。剛開始使用非常緊張,用熟悉後開車很輕鬆!這車已跑了近6萬公里,95 的高速路都用此功能。剛開始用要注意 1.跟車距離要設定3秒 最遠距離 2.一定要熟悉acc常用鍵的功能!3.新手要在車少 路好的高速路使用a 熟練後再去車流量大的路段去體檢!4...

htmlcss的自適應高度問題我覺得寬度問題可以設

min height 200px height 200px 這是自動增長高度,最小高要大於後面設定的高度 建議兩個值設成一個 這樣當你內容增加時,它會自己擴充套件高度 先設定baihtml及body的ducss的高,分別為zhiheight 100 如下 daohtml,body 或html bod...