響應調整圖片大小

我有CSS代碼這樣的寬度小於479px響應調整圖片大小

@media (min-width: 320px) and (max-width: 479px) { 
    .pi-hidden-2xsx-only { 
    max-width: 5px; 
    max-height: 5px; 
}

和我的圖像源使用類這樣

<a href="index.html"><img src="img/logo.png" alt="" class="pi-hidden-2xsx-only"></a>

爲什麼當我加不工作這個課程在我的圖片源？當我的移動設備小於寬度時，我的圖像應該自動調整大小以適應我應用的規則。

這是一個簡單的錯字，你忘了添加正確的結束標籤？在你的例子中，你需要在你的css結尾處增加一個'}'。此外，您的媒體查詢設置爲320px - 479px，而不是320px。 – thepio

你正在關閉你的媒體查詢嗎？用「}」 – Ricky

-1

這可能是因爲你是在一個錯誤的方式css文件編寫類...

正確的方法是使用標記名(img)類名像以前一樣

@media (min-width: 320px) and (max-width: 479px) { 
    img.pi-hidden-2xsx-only { 
    max-width: 5px; 
    max-height: 5px; 
}

唯一的變化pi-hidden-2xsx-only.img到img.pi-hidden-2xsx-only

2016-05-18 06:04:38

這是不對的。只有班級名稱纔可以選擇。 –

是的，這是有效的。我只是試過， –

你不能添加類名並在此之後寫標籤名。是的，只有類名可以選擇。但是你寫錯了方式 –

我有CSS代碼這樣對於寬度小於320像素

媒體查詢應該是：

@media (max-width: 320px) { 
    .pi-hidden-2xsx-only{ 
     /* your css */ 
    } 
}

2016-05-18 06:07:06

我改變了，但它仍然沒有改變我的圖像大小 – user2422414

先給這樣的代碼

@media screen and (min-width: 320px) { 
    img.pi-hidden-2xsx-only { 
     max-width: 5px; 
     max-height: 5px; 
    } 
}

或

@media only screen and (max-width: 479px) { 
    img.pi-hidden-2xsx-only { 
     max-width: 5px; 
     max-height: 5px; 
    } 
}

，並試圖改變max-width和max-height到width和height

2016-05-18 06:36:20 Advaith

回答