我无法弄清楚用于我的窗口调整大小问题的正确的媒体查询

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的起点（它是并排的 - ＆gt;垂直布局！）。

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

如果没有，请评论。

这是一个非常简化的网站部分的简化版本。

DEMO

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

修改

通常你想要将包含元素的宽度从固定宽度更改为100％，这样图像居中，就像这样。

DEMO

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

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