DaZeng 響應式布局和自適應布局 深入淺出

2021-10-10 20:19:03 字數 695 閱讀 1228

自適應是讓同乙個頁面布局適應不同的螢幕。

響應式是不同的螢幕用不同的布局。

響應式布局:使用**查詢,就是寫多個@media 命令來控制裝置的大小,讓頁面在不同的寬度範圍下,顯示為不同的布局效果 。如果使用 min-width屬性,則應該從小的斷點開始寫,到大的斷點結束。

media屬性

一般來說,先寫乙個預設大螢幕的樣式;再寫其它斷點下的樣式;可能斷點判斷異常,還需要在部分區間去寫乙個斷點。

rel=

"stylesheet"

media

="screen and (min-width :1200px)"

href

="demo2.css"

>

1.什麼是響應式布局

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

2.什麼是自適應式布局:

自適應布局就是指能使網頁自適應的顯示在不同大小終端裝置上的新網頁設計方式及技術,它需要開發多套介面來適應不同的終端。

總結:一句話就是自適應是讓同乙個頁面布局適應不同的螢幕,響應式是不同的螢幕用不同的布局。

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

自適應布局和響應式布局

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

響應式布局和自適應布局

一 區別 響應式布局等於流動網格布局,自適應布局等於使用固定分割點來進行布局 二 響應式布局 實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式 1 設定meta標籤 下面的檢視標籤告訴瀏覽器,使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。2 通過 查詢來設定樣式 medi...

自適應布局與響應式布局

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