什麼是響應式網頁佈局,什麼是響應式是什麼

2021-03-28 19:36:48 字數 4362 閱讀 5876

1樓:匿名使用者

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

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

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

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

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

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

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

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

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

2樓:匿名使用者

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

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

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

3樓:寶貝lj愛你

1、靈活性不同:

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

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

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

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

2、設計方法不同:

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

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

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

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

4樓:楚軒的眼鏡

靜態佈局(static layout)

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

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

自適應佈局(adaptive layout)

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

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

流式佈局(liquid layout)

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

響應式佈局(responsive layout)

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

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

恩恩大概就是這樣。

5樓:自由的人

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

6樓:匿名使用者

做好的html頁面都是靜態的

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

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

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

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

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

什麼是響應式是什麼

7樓:景田不是百歲山

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

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

8樓:匿名使用者

響應式佈局,是一個**能夠相容多個終端——而不是為每個終端做一個特定的內版本。

優點:1、使用者體容驗友好

響應式**可以根據不同終端、不同尺寸和不同應用環境,自動調整介面佈局、展示內容、內容大小,提供非常好視覺展示效果,一致性友好體驗。

2、節省設計與開發時間

響應式**介面只需要設計兩套設計效果圖,後期維護不需要分別維護pc介面、pad介面、移動介面,專心維護一個**即可。

3、seo友好

由於響應**在不同終端有友好的介面展示效果,使用者可以與**一直保持聯絡,比如url不變積累分享。

4、可以適應所有裝置螢幕

擁有了響應式的**設計則不同,使用者可以一直和**保持聯絡,而且它對使用者非常用好。

9樓:匿名使用者

對於抄web而言,意思主要是響應式佈局,襲就是用css的@media控制元件bai根據du不同的螢幕大小轉化不同的樣zhi式:

最常見的例

dao子:

如果螢幕寬度小於 300 畫素則修改背景顏色(background-color):

@media screen and (max-width: 300px)

}(這個時候只會在螢幕大小<300的時候執行

對於所有的程式語言,一般指的是相應使用者的操作根據不同的操作給出不同的介面/反應

例如下面的**,就是bootstrap的響應式佈局:

10樓:其艾艾

可以根據使用者習慣以及螢幕尺寸自適應,一次**製作,可以享受多個終端瀏覽。而且響應式**的質量度、瀏覽效果都比較ok。像是竹子建站系統,做的響應式**,收錄都比較快。

響應式設計怎樣佈局?

什麼是響應式Web設計,什麼是響應式web設計

響應式web設計是在開發和設計 過程中產生的一種方式,它的目的是讓內容佈局能隨使用者使用顯示器的不同而變化。再明確點說,這種設計概念,就是讓原本1292畫素寬,4欄的內容,能夠很好地顯示在1025畫素寬的使用者螢幕上,同時還能自動簡化成2欄。當然,讓它很好的適應智慧手機和其他種類電腦的螢幕也就成了水...

什麼是響應式網頁設計?使用了哪些技術?有什麼特點

響應式網頁設計意思就copy是,把bai網頁的寬度相容多解析度的意du思。整體的意zhi思就是把網頁相容到 smartphones,tablets,monitors,smarttv 啊等等。技術dao方面不只是一個,其中最火的就是 css3屬性的 media query 特點嘛ui方便,節省資源,提...

編寫響應式網頁,是需要必須會html5,css

本人做前端也有段時間了,我說說我的看法。你的想法的方向是對的,我認為日後站點前端發展的重點就會是響應式。但是,響應式佈局,難點並非是技術方面,而是設計。對於響應式佈局的技術基礎,只要你在mdn之類的 上,把html5 css3的特性吃透,基本上完全能滿足開發響應式佈局的工作。但是,技術過關了只是第一...