使用Reframe.js来使得iframe变成响应式

how to make responsive iframe window, 很实用的一个JS插件。

iframe, responsive

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 4155
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function(global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
        typeof define === 'function' && define.amd ? define(factory) :
        (global.reframe = factory());
}(this, (function() {
    'use strict';

function reframe(target, cName) {
        return new Reframe(target, cName);
    }

if (window.$ || window.jQuery || window.Zepto) {
        window.$.fn.reframe = function reframeFunc(cName) {
            return new Reframe(this, cName);
        };
    }

return reframe;

})));

reframe('iframe');

编译

CSS

html {
    box-sizing: border-box;
    font-family: sans-serif;
    -webkit-text-size-adjust: 2;
    -ms-text-size-adjust: 2;
    text-size-adjust: 2;
}
*,
:after,
:before {
    box-sizing: inherit;
}
body {
    color: #000;
    font-family: sans-serif;
    margin: 0;
}
article,
figcaption,
figure,
footer,
header,
main {
    display: block;
}
video {
    display: inline-block;
}
[hidden] {
    display: none;
}
code {
    font-family: monospace, monospace;
}
select {
    font: inherit;
    margin: 0;
    overflow: visible;
    text-transform: none;
}
[type=reset],
[type=submit],
html [type=button] {
    -webkit-appearance: button;
}
[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}
[type=search] {
    -webkit-appearance: textfield;
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}
body,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-bottom: .5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
}
a {
    background-color: transparent;
    color: #000;
    text-decoration: none;
}
a:active,
a:hover {
    outline-width: 0;
}
.js-reframe {
    padding-top: 56.25%;
    position: relative;
    width: 100%;
}
.js-reframe iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
figure,
p {
    margin: 1rem 0;
}
figcaption {
    margin: .5rem 0;
    text-align: center;
}
article {
    margin: 1rem auto;
    max-width: calc(100% - 4rem);
}
@media screen and (min-width: 768px) {
    article {
        max-width: 700px;
    }
}
footer p,
h1 {
    text-align: center;
}
footer,
h1 {
    margin: 2rem auto;
}

HTML

how to make responsive iframe window, 很实用的一个JS插件。

iframe, responsive

编辑器支持Emmet

快捷键

how to make responsive iframe window, 很实用的一个JS插件。

iframe, responsive

使用css flexbox（弹性框）实现的响应式布局网站模板

很棒的手机风格的IFrame界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：