[指南] Embed Responsively 幫助 Google Maps, Youtube ….等加上自適應 RWD 效果

章節連結

最近常會有需要轉貼 Google Maps, Youtube, Vimeo 之類的 iFrame 到網頁上,或是內嵌到某個網站內。但是要從頭調整成滿版的 RWD 版本,那麼得用 CSS 自行調整好一陣子。這個 Embed Responsively 可以幫助你解決這個問題,同時可以參考它的 CSS 寫法,加到自己的 Mixin 資料庫內。
css


操作步驟

1. 進入 Embed Responsively 網站後,選擇正確的網站標籤,貼上對應的網址
embed-responsively index


2. 接著會產生對應的 Code。分為兩個部分:CSS and HTML

HTML 部分

CSS 部分

Mobile 版本

embed-responsively mobile

Desktop 版本

embed-responsively mobile

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:16