[指南] 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

按赞加入粉丝团

延伸阅读