響應式 自適應式

2022-08-08 22:54:30 字數 1971 閱讀 3394

一點點補充

1、靜態布局(static layout)

2、流式布局(liquid layout)

3、自適應布局(adaptive layout)

4、響應式布局(responsive layout)

5、彈性布局(rem/em布局)

關於響應式布局,可使用  css3 @media 查詢  和  rem響應式布局  來製作響應式設計 。

可能有不少人對響應式**和自適應**都存在誤解,會以為這兩者都是同一型別的**,只是叫法不一樣。但是如果通過實際的瀏覽體驗,就能分辨出它們的區別。可以說自適應只是響應式當中的乙個子集,也就是說響應式的開始形態是自適應。 

什麼是響應式布局?

響應式網頁布局設計就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。打個比方來說:現在社會有很多響應產品,例如摺疊沙發,折疊床等等,當我們需要把沙發放到乙個角落的時候,此刻沙發就好比div吧,而角落裡的某個地方就好比父元素,由於父元素空間的改變,我們不得不調整div,讓它能夠依然放在角落裡。在專案中你會遇到不同的終端,由於終端解析度不同,所以你要想讓使用者體驗更好,就必要讓你的頁面能夠相容多個終端。

什麼是自適應布局?

總的來說響應式與自適應的原理是相似的,都是檢測裝置,根據不同的裝置採用不同的css,而且css都是採用的百分比的,而不是固定的寬度,不同點是響應式**在不同的裝置上看上去是不一樣的,會隨著裝置的改變而改變模板樣式、模組排版、展示樣式。

引:

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

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

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

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

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

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

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

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

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

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

靜態、自適應、流式、響應式四種網頁布局的特點概括

1、靜態布局:即傳統web設計,網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少,網頁布局始終按照最初寫**時的布局來顯示。

2、流式布局:頁面元素的寬度按照螢幕解析度進行適配調整,但整體布局不變。這就導致如果螢幕太大或者太小都會導致元素無法正常顯示。

3、自適應布局:分別為不同的螢幕解析度定義布局,即建立多個靜態布局,每個靜態布局對應乙個螢幕解析度範圍。

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

響應式缺點:

1、對於一些邏輯業務不同終端不同處理方式,不是很友好

2、響應式**無法區分移動端,浪費頻寬,載入耗時長。

這樣的話,響應式**載入的內容相比非響應式**會增加20-50%。載入內容多,速度慢,浪費流量。響應式**相對非響應式**的載入耗時,一般都會延長1-2秒,在2g、3g網路情況下更嚴重。所以有的時侯,使用者體驗不是很好。

(引:    可以參考、有點以偏概全的一篇文章)

共同學習,共同進步,若有補充,歡迎指出,謝謝!

響應式與自適應

ldjman 一 響應式 1 何為響應式 響應式就是 返回乙個 展示檔案,瀏覽器根據螢幕的大小而採用不同布局的視覺最適合的效果,意思同乙個 就是不同的螢幕大小會形成不同布局效果,目的都是為了根據螢幕的大小展現出最優的展示效果。三 響應式與自適應的對比 響應式 自適應 布局不一樣,根據螢幕的大小而匹配...

響應式和自適應的區別

玩前端也有幾個月了,發現大家普遍混淆了響應式和自適應的概念。先給大家體驗一下響應式和自適應的區別,請放大縮小一下螢幕嘗試 自適應的體驗 響應式的體驗 起初,網頁設計者都會設計固定寬度的頁面,最開始的電腦顯示器解析度種類不多,因為當時電腦本來就少,即使有變化也是 800 850 870 880。比如 ...

響應式與自適應的區別

什麼是自適應 awd adaptive design 是 aaron g.的一本技術書的標題,時間要比rwd晚一些。他認為 awd 在包括 rwd 的 css media query 技術以外,awd 有可能會針對移動端使用者減去內容,減去功能。awd 可以在伺服器端就進行優化,把優化過的內容送到終...