《高效能響應式Web開發實戰》一1 4 定義響應式

2021-09-23 16:02:24 字數 697 閱讀 8793

我們有沒有可能採用一種最直接的方式,用一句話闡述響應式在前端開發中究竟代指哪些技術?如果非要往前追溯對響應式技術的定義,一定要談alistapart[3] **上的被奉為經典的兩篇文章,即《responsive web design》[4]和《a dao of web design》[5] 。

在《responsive web design》中,作者僅僅使用了流式布局(fluid layout)和**查詢(media query)就完成了響應式頁面的構建。那我們可不可以說,響應式技術就等於流式布局加上**查詢?或者反過來說,如果乙個站點沒有使用流式布局或**查詢,那麼這個站點就不應該自詡使用了響應式設計?

這是不公平的,響應式設計應該是一類思考解決問題的方式而不是一成不變的技術集合。過去每當提到響應式技術時第一時間想到的只有流式布局和**查詢,但就在我鍵盤上敲出這一段文字的當下,本書涉及的響應式技術與效能優化技巧,甚至後端的ress概念,都也都被列入到響應式技術集合中,它們與**查詢同樣重要。但是,我們不能批評說只談**查詢和流式布局的人是狹隘的,技術仍然受限於整個時代水平的客觀性。或許不久的將來又會有更具有前瞻性的技術讓當下我們談論的退出歷史舞台,所以我們始終要以開放的心態和發展的眼光看待響應式。

**堅持正宗根本違背了飲食文化的本性,飲食之道,就如人類的一切生活文化,總是在適應環境,總是在改變。欣賞美食要有好奇心,不能食古不化,死守祖訓。

**至少在這一方面,飲食和技術是一樣的,沒有所謂的正宗可言。

《高效能響應式Web開發實戰》一2 3 視口

2.3.1 桌面瀏覽器的視口 在桌面瀏覽器中,假設某個頁面的寬度設定為自適應的100 html 這意味著html寬度始終與瀏覽器寬度保持一致。同時,瀏覽器寬度也等價於瀏覽器可視區域寬度,所以在桌面瀏覽器中,瀏覽器可視區域大小決定了頁面的布局。所見即所得,瀏覽器視窗多大,就會以多大的尺寸影響頁面布局。...

《高效能響應式Web開發實戰》一1 5 本書任務

圖1 5與圖1 6給出的是本書中要完成的頁面設計稿。這是一位產品經理為本書而設計的。2015年年初sitepoint 6 發布了一篇有關2015年網頁設計趨勢的文章 the big web design trends for 2015 7 文章中歸納了在2015年網頁設計中將會出現的趨勢性特徵,如大...

高效能web優化(一)

資料在網路上傳輸的時間分成兩部分,一部分是使用者請求的資料報到達伺服器的時間,另一部分是伺服器的回應資料經由網路傳送給客戶端的時間,這兩部分的時間稱為響應時間。響應時間的大小取決於頻寬和資料量的大小。響應時間的其中大部分時間消耗在伺服器端,我們用吞吐率來衡量這部分時間,即每秒處理請求數。吞吐率影響因...