javascript - 如何使现代 flipkart 横幅具有响应性

Question

我有一种情况想要使 flipkart 横幅具有响应性。

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

我试过这个线程 Make banner ads responsive但它仅适用于旧横幅，不适用于新横幅。

此处演示: https://jsfiddle.net/hwub8sw1/

这是我尝试过的:

样式.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 标签