在WordPress网站设计中我们经常通过iframe元素来插入优酷等外部视频元素。在响应式网页布局中,如果我们通过width和height属性指定了iframe的宽度和高度,那么在移动设备上会出现iframe溢出的现象,如下图所示,这样会影响整个网页的布局。

我们可以通过css来控制iframe的样式,使其在WordPress响应式网页中自适应浏览设备的宽度,解决方案如下:

iframe元素本身并无法伸缩,除非通过js显示的设置其宽度。但是我们可通过一个iframe-container元素来包裹iframe,同时让iframe-container元素的宽度充满包含块的宽度,并且根据iframe的长宽比,设置iframe-container元素的padding-bottom百分比。

其实,这种方式的精髓就在于设置iframe-container元素的padding-bottom属性,设置该属性的目的在于变相的设置元素的高度。因为给padding-bottom设置百分比,是相对于父元素的width而言的,如果对height属性设置百分比,则相对于父元素的height,而父元素的height值我们通常使用默认的auto,因此会出现子元素height也为0.因此,我们只能给padding-bottom设置属性。这样,只需让iframe元素充满iframe-container即可。

可在WordPress主题模板的css样式中加入如下样式代码:

.wrap{
width: 400px;
margin: auto;
border: 5px solid greenyellow;
}
.iframe-container{
height: 0;
padding-bottom: 97.6%;
position: relative;
}
.iframe-container iframe{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 400px) {
.wrap{
width: 300px;
}
}

在插入iframe元素时,采用如下方法调用其样式即可:

<div class=”wrap”>
<div class=”iframe-container”>
<iframe height=498 width=510 src=’http://player.youku.com/embed/XMjQ4NDUyNjYyOA==’ frameborder=0 ‘allowfullscreen’></iframe>
</div>
</div>

采用css样式控制后,iframe可自适应移动设备的大小,效果如下图所示:

作者 网络

发表评论

您的电子邮箱地址不会被公开。