iframe 响应式ua_响应式IFRAME

iframe 响应式ua

Responsive web design revolutionized the web and spurred a movement away from native apps to web apps easily customizable for a mobile environment.  We use media queries and non-pixel-based dimensions to make responsive design easier; in fact, img { max-width: 100% } is one of my favorite CSS snippets.  IFRAME elements cause an all together different problem because they aren't restricted to dimensions.  I found an amazing post by Gregory Gan that describes an ingenious method for responsive IFRAMEs and I wanted to share it with all of you!

响应式Web设计彻底改变了Web，并推动了从本机应用到易于为移动环境定制的Web应用的发展。 我们使用媒体查询和非基于像素的尺寸来简化响应式设计。 实际上， img { max-width: 100% }是我最喜欢CSS代码段之一。 IFRAME元素会导致一个完全不同的问题，因为它们不受尺寸限制。 我发现Gregory Gan的精彩文章描述了一种用于响应式IFRAME的巧妙方法，我想与大家分享！

HTML (The HTML)

To make your IFRAME responsive you'll need to wrap it in a <div>:

要使您的IFRAME响应，您需要将其包装在<div> ：

<div class="iframe-container">
  <iframe width="1425" height="559" src="https://www.youtube.com/embed/BS4ojxHC1EM"></iframe>
</div>

The<div> will be the frame reactive frame of reference for the IFRAME.

<div>将是IFRAME的帧React参考帧。

CSS (The CSS)

The parent <div> has an interesting set of CSS:

父<div>有一组有趣CSS：

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}

The padding-top is the interesting bit; setting the padding-top to a percentage of height 9 / width 16 allows us to keep a desirable ratio.  This ratio matches a YouTube height to width ratio, but you can use any ratio to match the ratio of your IFRAME usage.

padding-top是有趣的部分； 将padding-top设置为height 9 / width 16的百分比可以使我们保持理想的比率。 该比率与YouTube的高宽比相匹配，但是您可以使用任何比率与IFRAME使用量的比率相匹配。

Next you define the IFRAME's CSS:

接下来，定义IFRAMECSS：

.iframe-container iframe {
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

The IFRAME's CSS is unremarkable since the<div> does most of the work;  positioning the IFRAME as absolute and setting its width and height to 100% constrains the element to the DIV's reactive dimensions.

IFRAMECSS没什么变化，因为<div>完成了大部分工作。 将IFRAME定位为absolute并将其width和height设置为100%会将元素限制为DIV的反作用尺寸。

The CSS above is all it takes to turn a problematic, static IFRAME into a reactive element that's as easy to manipulate as an image.  Kudos to Gregory Gan for his amazing post and tip!

上面CSS就是将有问题的静态IFRAME转换为像图像一样易于操作的React性元素的全部步骤。 感谢Gregory Gan的精彩文章和建议！

翻译自: https://davidwalsh.name/responsive-iframes

iframe 响应式ua