0

我有一个带有 IFRAME 的响应式设计，其中包含一个带有 Flash 内容的 html 文件。

<iframe width="800px" height="600px" frameborder="0" align="middle" class="iframeStyle" src="linkToHtmlWithFlash.html"> </iframe>

现在我需要随着窗口宽度的变化按比例调整 IFRAME 及其包含的 flash 的大小。

我已经尝试过media query和transform:scale这样的组合

@media (max-width: 767px){
 .iframeStyle {
    transform: scale(0.74);
    transform-origin: 0 0 0;
}
}
@media (max-width: 979px) and (min-width: 768px) {
 .iframeStyle {
    transform: scale(0.9);
    transform-origin: 0 0;
}
}

但是这种方法似乎不太好，只有在达到截止值时才会调整大小。

任何使用 jquery 或纯 CSS 的解决方案？

有没有使用纯 CSS 或 jQuery 的解决方案。

4

1 回答 1

0 
@media (max-width: 767px){
 .iframeStyle {
    transform: scale(0.74);
    transform-origin: 0 0 0;
    width:80%;
}
}
@media (max-width: 979px) and (min-width: 768px) {
 .iframeStyle {
    transform: scale(0.9);
    transform-origin: 0 0;
    width:100%;
}
}

Use this code i thing useful for you.

use this 

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
于 2013-11-14T06:45:03.627 回答