PWA 初探與實踐（3）響應式設計

PWA · 發表 2019-01-22 07:02:09

摘要：漸進式網路應用程式，意思就是我們一步一步把應用做的更好更完美，今天討論一下響應式佈局。說到響應式佈局大家都會想起 bootstrap 框架。似乎他就是響應式佈局代言人。先介紹一下幾個特徵也是今天的主要內容。 a. 流動網格佈局（Fluid grid ), b. 我們大多數靜態資源...

漸進式網路應用程式，意思就是我們一步一步把應用做的更好更完美，今天討論一下響應式佈局。說到響應式佈局大家都會想起 bootstrap 框架。似乎他就是響應式佈局代言人。

先介紹一下幾個特徵也是今天的主要內容。

a. 流動網格佈局（Fluid grid ),

b. 我們大多數靜態資源和使用者流量都花在圖片或其他媒體

c. 通過 Media queries 把我們應用根據螢幕尺寸進行劃分隔離。

有關什麼是流動網格佈局，通過下圖幫助大家理解

響應式佈局設計，這裡響應不僅是響應不同裝置的螢幕大小

1. 響應不同使用者，現在我們每個人看到的京東或淘寶頁面都個不相同。

2. 然後就是響應不同裝置

3. 響應不同資料。在 wifi 或資料情況會精簡資料顯示，額外資訊會詢問使用者是否顯示或更新

分享一些 pwa 佈局設計的一些精粹

1. 我們避免在橫螢幕上來滾動內容，如果這樣想起來都挺傻。

2. 響應式佈局很難通過一套樣式讓我們的應用在大屏桌上型電腦和小螢幕的移動裝置看起來都那麼順眼

協調，我們需要作出一些犧牲。例如我們在大螢幕上適當在兩邊留出一定距離。

我們設計方式，我們在開發靜態頁面其實流程也是一種漸進設計

html -> html+css -> html+css+javascript

1. 顯示 html 羅列出頁面內容和結構

2. css 來新增樣式和尺寸和位置

3. js 增添一些特效

響應式內容，包括重新排序，重新定位，替換內容，移除部分內容，這些

內容都需要我們在設計佈局一一考慮到

對於效能我們需要考慮一些因素

1. 第一原則就是儘量不用圖片，

2. 那麼不用圖片，我們用什麼來代替圖片呢，我們可以考慮一些適量圖格式如 3. 來代替圖片達到同樣的目的

4. 如果必須用圖片我們要儘量在滿足使用者的要求的情況下實用低解析度的圖片

圖片格式也儘量選擇適合網路的壓縮格式如：WebP PNG JPEG

說到圖片的優化我們就必須提一下 picture 和 source 這兩個新引進標籤，他們為我們圖片提供很多選擇，下圖中如果我們螢幕尺寸大於 650 px 時我們就會呼叫 srcset 中圖片，而不是預設圖片。有關新標籤大家可能會擔心那些老的瀏覽器是否支援這些標籤，不必擔心如果不支援 picture 標籤，他就會使用 img 標籤來顯示圖片。