Question

我有一种情况，我想让flipkart横幅响应。

它适用于超过768像素的屏幕尺寸，但不适用于移动尺寸。

我已经尝试过这个帖子Make banner ads responsive，但它只适用于较旧的横幅而非新广告。

DEMO HERE： https://jsfiddle.net/hwub8sw1/

以下是我的尝试：

的style.css

* {margin:0; padding:0;}

div[data-wrid^=WRID] {
    margin: 0 auto;
    max-width:100% !important;
}

div[data-wrid^=WRID] img {
  max-width:100% !important;
  margin:0 auto;
}

iframe {
  max-width:730px !important;
     text-align:center !important;
     margin:0 auto;
}

@media (max-width:730px) {
    iframe {
      max-width:100% !important;
    }

     div[data-wrid^=WRID] img {
      max-width:100% !important;
      margin:0 auto;
    }   
} 


@media (max-width:400px) {
    iframe {
      max-width:100% !important;
    }

     div[data-wrid^=WRID] img {
      max-width:90% !important;
      margin:0 auto;   
    }             
}   


@media (min-width:320px) {     
    iframe {
      max-width:100% !important;
    }

     div[data-wrid^=WRID] img {
      max-width:90% !important;    
      margin:0 auto;
    }/* smartphones, iPhone, portrait 480x320 phones */ 
}

@media (min-width:481px) { 
      iframe {
      max-width:100% !important;
    }

     div[data-wrid^=WRID] img {
      max-width:100% !important;
      margin:0 auto;
    }
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
}
@media (min-width:641px) { 

      iframe {
      max-width:100% !important;
    }

     div[data-wrid^=WRID] img {
      max-width:100% !important;
      margin:0 auto;
    }
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
}

HTML

 <div data-wrid="WRID-149802169852992393" data-widgettype="staticBanner" data-responsive="yes" data-class="affiliateAdsByFlipkart" height="90" width="728" style="text-align:center;"></div>
      <script async src="//affiliate.flipkart.com/affiliate/widgets/FKAffiliateWidgets.js"></script>

Answer 1

它所采用的横幅宽度是多少？你的每个max-width语句都有!important，这实际上不是一个好习惯。尝试删除max-width:730px !important;。我认为，对于每个实例，它都采取了这种做法，因为它不在任何min:或max:条件下并且附加了!important标记

Answer 2

使用脚本，您将在iframe内的页面上加载flipkart横幅。并且您不能将任何自定义css或script应用于来自您的域以外的任何iframe。有关更多信息，请参阅现有答案：How to apply CSS to iframe?

如何使现代flipkart横幅响应

2 个答案: