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 - 图像网格布局和媒体查询的响应式设计

回答

相关问题