RWD

如何讓 Google Map 支援 RWD 的效果

我們在製作一些與行程或地點有關的網頁時,有時候會希望附上相關的地圖,好方便使用者了解附近的地理位置及規劃路線,這類的地圖應用以 Google Map 最常見,但 Google Map 內嵌到網頁的方式是使用 iframe,對一般的網頁也許不受影響,但如果遇到 RWD 的網頁時,就會發現 Google Map 提供的 iframe 並不會隨著設備的不同而去調整適當的比例,這時,你可以試試下面的方式。

如何製作 RWD 響應式的影片?

有時客戶會希望在網頁中插入一段 Youtube 影片讓畫面更活潑點,如果是一般的網頁,你只需要直接將 Youtube 的給你的 Code 嵌在網頁裡即可。但如果你正在做 RWD 的網頁,你會發現直接使用 Youtube 給你的 Code 版面會無法隨視窗大小進行縮放,這是因為 Youtube 給你的 Code 使用的單位都是 px 的絕對單位,加上影片有長寬比的問題。常見的有 4:3 及 16:9,使用錯誤的比例會造成變形。如果你將絕對單位改成百分比。比如將影片寬設成 100%,高度設成 auto。這個想法沒有錯,但實作後你會發現影片的高度不會隨寬度自動等比例縮放,造成長、寬比例錯誤而導致影片變形,因此我們需要一點小技巧,讓影片可以配合響應式網頁的縮放需要。

Scroll to Top