Stuck - 圖像網格佈局和媒體查詢的響應式設計

我正在手工編碼的第一次（主要是印刷設計師）的網站上工作。我試圖只使用HTML和CSS，因爲我沒有時間潛入任何Javascript，我真的很想知道我在用什麼。所以，我的主要內容是在一個圖像網格中設置的，所有圖像都是相同的大小，3列寬。Stuck - 圖像網格佈局和媒體查詢的響應式設計

我想使用不同瀏覽器/設備大小的響應式設計的媒體查詢。最好的我理解這一點，你創建不同的CSS文件爲相同的HTML佈局，加載取決於設備/瀏覽器的大小。

現在，網格中的每個圖像都被設置在一個div內作爲標籤。然後我使用CSS來定義具有背景屬性的圖像。

<div id="main-content"> 
    <div id="project-1"> 
     <a id="image-1" href="URL here"></a> 
    </div> 
    <div id="project-2"> 
     <a id="image-2" href="URL here"></a> 
    </div> 
    ...etc. 

#image-1 { 
    background: url(image.png) no-repeat; 
    width: x; 
    height: y; 
} 

...etc.

經過一番研究，聽起來好像這不是一個好的解決方案;最好在HTML本身中使用標籤。

我的問題是，我這樣做是錯誤的嗎？我對放置圖像的位置有點困惑，以便我可以使用媒體查詢修改佈局。提前感謝您的任何建議。乾杯！

來源

2013-04-25 tdo-design

這看起來絕對很好。

我想你的情況做的唯一一件事就是與<img>標籤在HTML中添加圖像<a>內，讓他們所有的同一類，而不是把他們都在單獨通過CSS，因爲那麼當您爲自適應佈局定義媒體查詢，您只需修改該類的width和height，並且您的圖像都將相應地縮放。你只需要節省一點工作。

我希望這個比較清楚。 :)

來源

2013-04-25 23:30:24

清除爲天，謝謝。我沒有提到的一件事是我希望使用圖像精靈和轉換來給每個圖像一個灰度 - 顏色翻轉效果。我見過的唯一解決方案是使用CSS，如果我只使用HTML中的圖像標籤識別圖像，會導致問題。有沒有辦法用你的方法做到這一點，或者我正在尋找更復雜的解決方案？ – 2013-04-26 00:09:41

是的，你可以用CSS3做灰色效果。將此代碼添加到圖像類中，然後將鼠標懸停在其上時只需設置「灰度（0％）」。這樣你就不必上傳你的圖像的兩個版本。 'filter：greyscale（100％）; -webkit-filter：灰度（100％）; -moz-filter：greyscale（100％）; -ms-filter：灰度（100％）; -o-filter：greyscale（100％）;' 雖然這不適用於IE。檢查這個鏈接http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html，但我還沒有測試過。雖然我對精靈不是很有信心，所以恐怕我無法幫助你。 :( – 2013-04-26 09:18:48

謝謝，我會給它一個機會，我仍然可以在兩種狀態之間使用1秒翻轉過渡嗎？我更喜歡它在兩者之間的一個艱難變化 – 2013-04-26 12:44:28

Stuck - 圖像網格佈局和媒體查詢的響應式設計

回答

相關問題