響應式布局和自適應布局

2022-09-07 22:00:36 字數 643 閱讀 5041

一、區別:

響應式布局等於流動網格布局,自適應布局等於使用固定分割點來進行布局

二、響應式布局

實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式

1、設定meta標籤

下面的檢視標籤告訴瀏覽器,使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。

2、通過**查詢來設定樣式 media queries

media queries是響應式設計的核心。它根據條件告訴瀏覽器如何為指定檢視寬度渲染頁面。

假如乙個終端的解析度小於980px

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

#content

#footer

}

3、設定多種檢視寬度

/** ipad **/

@media only screen and (min-width: 768px) and (max-width: 1024px) {}

/** iphone **/

@media only screen and (min-width: 320px) and (max-width: 767px) {}

自適應布局和響應式布局

我根據個人理解描述一下 一套程式在多種終端裝置展示,頁面布局有2種 自適應布局和響應式布局。這二者有啥區別呢?自適應布局,就是頁面在多種終端裝置,不同解析度下,能夠正常展示,不會出現錯位,嚴重變形等,但頁面布局不變。而響應式布局,則在不同終端 不同解析度下,頁面布局 元素呈現的先後順序可能會有所變化...

自適應布局與響應式布局

什麼是響應式布局 響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個 能夠相容多個終端,而不是為了每乙個終端做乙個特定的版本。什麼是自適應式布局 自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端裝置上的新...

響應式布局和自適應布局的不同

起初,網頁設計者都會涉及固定寬度的頁面,後來隨著顯示器越來越多,以及筆記本的普及,這時固定寬度的web頁面就無法滿足,各裝置的要求,於是就出現了一種新的布局方式 寬度自適應布局。我們平常討論的寬度自適應布局,大多指的就是寬度自適應布局。這種布局出現了兩種流派 百分比寬度布局 和 流式布局。百分比寬度...