自适应布局网页设计 (响应式布局) 的好处是一套网页编码能在桌面电脑, 平板, 手机上根据屏幕的大小自动调整显示方式, 极大的提升了用户使用友好性.
但凡事有好处就有弊端, 比如今天提到的如何如何让 iframe 保持高宽比例问题. 如果网页中嵌入了一个视频 iframe, 我通常会给这个 iframe 设定固定的高度和宽度, 这个高度和宽度的比例通常要适应视频的高宽必, 比如 16:9. 但是, 如果我们一旦写死了这个高度和宽度, 当有人使用不同屏幕大小的设备访问网页时就会出现问题, 比如小屏手机上, 原本在电脑上 700px/500px 的宽度和高度就明显不合适了. 我们的想要的结果是, iframe 的高宽比能在不同大小的屏幕上, 宽度调整, 高度也能调整, 但宽高比保持不变, 因为视频的 16:9 是不会根据你的屏幕宽度而改变的.
解决这个问题最简单的方法是使用一种新的 CSS 长度单位: vm; 一个 vm 长度单位相当于 1% 的窗口宽度, 所以, 如果我们想让视频 iframe 的宽度和高度保持 560/315 的比例, 可以使用下面的代码:
- iframe {
- width: 100vw;
- height: 56.25vw; /* 100/56.25 = 560/315 = 1.778 */
- }
上面的代码就是让宽度等于 100%, 而高度是 56% 的宽度.
需要注意的是, 各种浏览器对 vm 这个新长度单位的支持情况并不理想, 有兴趣的朋友可以查一下 ( http://caniuse.com/viewport-units )了解一下浏览器的支持情况.
还有一种更为通用的方法, 是基于 css2 的:
- <div class="aspect-ratio">
- <iframe src=""frameborder="0"></iframe>
- </div>
- <style>
- /* 这个规则规定了 iframe 父元素容器的尺寸, 我们要去它的宽高比应该是 25:14 */
- .aspect-ratio {
- position: relative;
- width: 100%;
- height: 0;
- padding-bottom: 56%; /* 高度应该是宽度的 56% */
- }
- /* 设定 iframe 的宽度和高度, 让 iframe 占满整个父元素容器 */
- .aspect-ratio iframe {
- position: absolute;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- }
- </style>
这种写法能起作用, 是利用了 padding 属性的一个有趣的百分比值特征:
The percentage is calculated with respect to the width of the generated box's containing block, even for'padding-top'and'padding-bottom'.
来源: http://www.webhek.com/post/responsive-video-iframes-keeping-aspect-ratio-with-only-css.html