響應式布局這件小事有哪些優點和缺點該怎麼設計

2021-09-07 16:58:48 字數 1112 閱讀 2275

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

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

1

優點:面對不同解析度裝置靈活性強

能夠快捷解決多裝置顯示適應問題 2

缺點:相容各種裝置工作量大,效率低下

**累贅,會出現隱藏無用的元素,載入時間加長

其實這是一種折衷性質的設計解決方案,多方面因素影響而達不到最佳效果

一定程度上改變了**原有的布局結構,會出現使用者混淆的情況

end

通過不同的**型別和條件定義樣式表規則。**查詢讓css可以更精確作用於不同的**型別和同一**的不同條件。**查詢的大部分**特性都接受 min和max用於表達」大於或等於」和」小與或等於」。如:width會有min-width和max-width**查詢可以被用在css中的 @media和@import規則上,也可以被用在html和xml中。通過這個標籤屬性,我們可以很方便的在不同的裝置下實現豐富的介面,特別是移動設 備,將會運用更加的廣泛。

裝置的寬和高device-width,device-heigth顯示螢幕/觸覺裝置。

渲染視窗的寬和高width,heigth顯示螢幕/觸覺裝置。

裝置的手持方向,橫向還是豎向orientation(portrait|lanscape)和印表機等。

畫面比例aspect-ratio點陣印表機等。

裝置比例device-aspect-ratio-點陣印表機等。

物件顏色或顏色列表color,color-index顯示螢幕。

裝置的解析度resolution。 3

@media 裝置名 only (選取條件) not (選取條件) and(裝置選取條件),裝置二

示例一:在link中使用@media:

上面使用中only可省略,限定於計算機顯示器,第乙個條件max-width是指渲染介面最大寬度,第二個條件max-device-width是指裝置最大寬度。

django有哪些好處和優點

django簡介 django是一種開源的大而且全的web應用框架,是由python語言來編寫的。它採用了mvc模式,什麼是mvc?大家不要著急,mvc這麼好的東西我在下面會精細的講一下!django最初是被開發來用於管理勞倫斯出版集團下的一些以新聞為主內容的 一款cms 內容管理系統 軟體。並於 ...

流式布局和響應式布局

常見的面試題會讓你聊一聊流式布局與響應式布局,我還沒遇到過直接問他倆區別的面試官,都是根據我的專案 裡面有用到流式布局 響應式布局 圍繞這兩點感覺網上大部分部落格都長得差不多,那我就用自己粗淺的理解說一下由此展開的一點問題吧。說起流式布局首先就要提到的是老掉牙的固定布局 瀏覽器大小不影響內部元素大小...

madia query和響應式布局

media screen and 裝置特性 doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title text ...