使用@media（min-width：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;
 }

但当我到达某个像素时，我想改变宽度，并将其保持在800px以下。

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