响应性设计资料和背景资料

Question

这是我第一次做一些响应性的DIV，现在我做了我的响应背景，我想我的内容看起来如下：

​

​

但看起来是这样的：

​

​

如果有人能帮我那就太好了..。这是我的代码，你看我在做什么

jsFiddle

HTML：

<div class="container">
    <div class="leftColumn"><img src="projekt.png" width="400" height="400"></div>
    <div class="rightColumn"><img src="projekt2.png" width="400" height="400"></div>
</div>

CSS：

.container {width:100%;}

.leftColumn  {width:50%; float:left;}
.rightColumn {width:50%; float:left;}

@media(max-width:400px)
{
.leftColumn  { width:100px; float:none; display:block; position:relative; background-color:red; }

.rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }

}

图像为400 x 400像素，背景图像为1920 x 1080。

Answer 1

对于背景，请使用背景尺寸属性(CSS3)。

.container {width:100%;}

.leftColumn  {width:50%; float:left;}
.rightColumn {width:50%; float:left;}

@media(max-width:400px)
{
    .container {
        width: 400px;
        height: 400px;
        background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
        background-size: 400px;
    }    
    .leftColumn  { width:100px; float:none; display:block; position:relative; background-color:red; }
    .rightColumn { width:100px; float:none; display:block; position:relative; background-color:blue; }
}
@media (min-width:401px) and (max-width:800px)
{
    .container {
        width: 800px;
        height: 800px;
        background: url(http://www.extremedialer.com/wp-content/uploads/2013/10/bg-1.jpg);
        background-size: 800px;
    }    
    .leftColumn  { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:red; }
    .rightColumn { width:200px; height:200px; float:left; margin: 20px; display:block; position:relative; background-color:blue; }
}

http://jsfiddle.net/XmqNy/235/

Answer 2

在css文件中试一试：

@media(max-width:400px)
{
    .leftColumn  { width:100px;   position:relative; background-color:red; }

    .rightColumn { width:100px;   position:relative; background-color:blue; }

}

您不需要写显示:无。