html - 使用@media 更改宽度(最小宽度 :XXXXpx) Responsive ads

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