繼續昨天的響應式網頁設計(RWD)，今天我要來將首頁中最大的那張圖片改成responsive。

當我用電腦瀏覽頁面時，圖片旁邊會有空白的地方，但是我希望圖片的大小能剛剛好填滿我的視窗。如果一開始有人嚇載我的template的話，在PWA project中的images目錄下，可以看到我事先放了3張不同大小的相同圖片(從最大到最小分別是1200x675、900x506、480x270 pixels)。

我希望瀏覽器能根據我裝置的大小來載入最適合的圖片，要怎麼做哩？其實有很多種作法，比較好的策略是準備同一張圖不同大小的好幾個版本，並使用img的srcset屬性，在不同的條件下載入不同的圖片。

img srcset屬性

不同圖片的載入條件可以根據：

1. 裝置的Pixel Density(單位：dpi, dots per inch)。
2. 圖片顯示在裝置的實際寬度。

這裡我是根據圖片的寬度來載入圖片，寬度的算法是：

寬度＝圖片寬度 (pixel) * (pixel density)

例如：(預設圖片寬度 = 100%的viewport寬度)
圖片寬度 = 1200px, 1x的螢幕上，圖片寬度 = 1200w。
圖片寬度 = 500px，2x的螢幕上，圖片寬度 = 1000w。(在pixel density = 2x的螢幕上，顯示寬500px的圖片實際上需要1000px)

把我準備的三張圖添加到img元素的srcset屬性中吧：

<img src="/src/images/main-image.jpg"
     srcset="/src/images/main-image-lg.jpg 1200w,
            /src/images/main-image.jpg 900w,
            /src/images/main-image-sm.jpg 480w"
     alt="Explore the City"
     class="main-image">

OK完成後，在chrome develop tools的Network中，如果可以發現當我調整螢幕大小時，browser會再去下載不同的大小的圖片，就代表成功囉!!

接下來，當我按下右下方的plus icon時，「發佈貼文頁面」的呈現是直接跳出來的。為了讓我的PWA使用者體驗更加順暢，我想要做成以動畫的形式呈現這個頁面。

在feed.js中我是透過openCreatePostModal()這個function來實現按下icon後跳出頁面的功能。接著使用closeCreatePostModal() function來實現按下X鈕後離開此頁面的功能。

首先，整個頁面(也就是表單)的id叫「#create-post」，所以我在feed.css中針對這個id的CSS做一些調整：

#create-post {
  z-index: 1001;
  position: fixed;
  width: 100%;
  min-height: 100vh;
  overflow-y: scroll;
  bottom: 0;
  top: 56px;
  background: white;
  text-align: center;
  transform: translateY(100vh);
  transition: transform 0.3s;
}

說明一下，transform CSS屬性可以讓元素被「平移」、「旋轉」、「縮放」和「傾斜」。我這裡使用的「translateY(100vh)」是將元素以參考點(Y軸為0)為中心，沿著Y軸位移到100%的view height距離。
(注意：Y軸的方向為從上到下，與原本我們認知的剛好相反)

再來，Transition CSS屬性為「在給定的持續時間內平滑地更改屬性值」，所以我就設定成0.3秒後才會呈現transform的位移效果。

在feed.js中的openCreatePostModal()我新增了一行code，讓用戶按下plus icon後觸發該函式時，表單會在0.3秒後從100vh位移到0(也就是最上方)：

createPostArea.style.transform = 'translateY(0)';

而在用戶取消頁面時，在closeCreatePostModal()中，再將transfrom屬性設置成100vh回到最下方：

function closeCreatePostModal() {
  createPostArea.style.transform = 'translateY(100vh)';
}

Day18 結束!!