css - 我无法确定用于我的窗口调整大小问题的正确媒体查询

Question

http://library.skybundle.com/

我需要将两个大图标水平并排，直到将窗口大小调整为更小（例如，像手机一样），然后当这种情况发生时，右侧的橙色图标应该下降到绿色下方一是形成垂直布局。

我知道我应该使用媒体查询，正如我被告知的那样，但我不确定如何执行此操作或使用哪些查询。

我不擅长 CSS，但我正在学习。我已经进行了大量的研究，花了数周时间试图弄清楚这一点。请帮忙。谢谢！

Answer 1

将此添加到您的 css 文件中：

/*if the screen is 800 pixels or less */
@media only screen and (min-width: 800px) {
    .page {width: 100%; } /*set your page class to be 100% width */
}

Answer 2

这是您的 jsfiddle 的起点（它展示了并排 -> 垂直布局！）。

http://jsfiddle.net/gjGGw/1/

HTML

<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />

CSS

img{width:300px;height:300px;margin:0px 30px;}

Answer 3

确保这低于您的其他规则.skone-half。

这应该工作

@media(max-width: 960px) {
    .skone-half {
        width: 100%;
    }
}

如果没有，请发表评论。

这是您网站中该部分的真正简化版本。

演示

所以根据那个小提琴你可以告诉代码有效。如果您在实施它时遇到问题，请告诉我，或者它是否由于其他原因无法正常工作。如果你想要我只是将它设置为它打破容器的宽度时，你也可以调整它改变的 px 点。

编辑：

通常，尽管您希望将包含元素的宽度从固定宽度更改为 100%，但这样图像居中，就像这样。

演示

在您的情况下，您有两个需要更改宽度的容器，因此它看起来像这样。

@media(max-width: 960px) {
    .skone-half {
        width: 100%;
    }
    #container, #head-content {
        width: 100%;
    }
}