使用@media更改寬度（最小寬度：XXXXpx）自適應廣告

Question

對不起，您可能會這樣做，但如果您有其他方式，請成爲我的客人。

.top-widget { 
width: 75.5%; <-------------- This is the correct width that i want to have. 
padding: 0 3px 0 0; 
border: none; 
background: none; 
} 

但是，當我達到某個像素，我想改變寬度，並保持800像素以下的方式。

@meda (min-width:800px) { .top.widget { width: 55.%; } } <-- This gives everything 55% (Also abow 800px) 
@media (min-width:800px) { .adslot_1 { width: 320px; height: 100px; } } 
@media (min-width:1024px) { .adslot_1 { width: 728px; height: 90px; } } 
@media (min-width:1300px) { .adslot_1 { width: 728px; height: 90px; } } 
@media (min-width:1700px) { .adslot_1 { width: 728px; height: 90px; } } 

這使廣告在平板電腦上看起來也很棒。

Answer 1

使用max-width代替min-width，所以媒體查​​詢用於以下指定的屏幕寬度

你的情況：

@media (max-width:800px) { .top.widget { width: 55.%; } } 
@media (max-width:800px) { .adslot_1 { width: 320px; height: 100px; } }  
@media (max-width:1024px) { .adslot_1 { width: 728px; height: 90px; } }  
@media (max-width:1300px) { .adslot_1 { width: 728px; height: 90px; } }  
@media (max-width:1700px) { .adslot_1 { width: 728px; height: 90px; } }