Question

我有一个响应式设计，IFRAME有一个内置flash内容的html文件。

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

现在我需要在窗口宽度改变时按比例调整IFRAME及其包含闪光的大小。

我已尝试使用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的解决方案。

Answer 1

@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%;
}
}

使用此代码我对您有用。

使用此

/* 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 */
}

在响应式设计中按比例调整包含带有Flash内容的html的IFRAME

1 个答案: