Question

如果没有iFrame用户的大量努力，我们如何设计一款能与响应式设计完美配合的iFrame？

例如：http://openspeedtest.com/Get-widget.php

要使其具有响应性，我们需要在父页面上使用以下CSS。

> @media (max-width: 1200px){
> #iframeTest{ transform: scale(.7);
> -ms-transform: scale(.7); /* IE 9 */
> -webkit-transform: scale(.7); /* Safari and Chrome */
> -o-transform: scale(.7); /* Opera */
> -moz-transform: scale(.7); /* Firefox */  width:100%;}
> 
> } @media (max-width: 655px){
> #iframeTest{ transform: scale(.7);
> -ms-transform: scale(.7); /* IE 9 */
> -webkit-transform: scale(.7); /* Safari and Chrome */
> -o-transform: scale(.7); /* Opera */
> -moz-transform: scale(.7); /* Firefox */   margin-left: -15%; width: 760px; top:-100px;}
> 
> } @media (max-width: 419px){  
> #iframeTest{ transform: scale(.5);
> -ms-transform: scale(.5); /* IE 9 */
> -webkit-transform: scale(.5); /* Safari and Chrome */
> -o-transform: scale(.5); /* Opera */
> -moz-transform: scale(.5); /* Firefox */ top:-130px;}
>            }

有没有一种方法可以设计一个iFrame页面，使其在不添加其他CSS的情况下在响应式设计中表现出色？

使用Javascript，我们可以找到父文档的当前宽度并相应地对齐iFrame页面中的元素吗？

制作响应页面的iFrame

0 个答案: