WordPress div响应移动

Question

我定制了这个摄影网站的家庭模板，包括4个div，以突出摄影师的投资组合的4个主要部分。在浏览器或移动设备上调整大小时，它们没有响应。我必须包括什么才能让他们做出反应？（媒体查询最小最大，不一定）

地点：http://jeremy.insctest1.com

其中一个部门：

div onhtml="window.location='/投资组合/架构/架构/'；"id="item1"style="宽： 453px；高： 400px； background-Image： url（'http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png'）；浮动：左；边距： 0 20px 20px 0；"

                div class="item-title" style="width:inherit; position: relative; top:350px; height: 50px; background-image: linear-gradient(to bottom ,rgba(232,232,232,0.8) 0%, rgba(214,214,214,0.8) 100%);">

            div class='b' style="          
height: 50px;     
width: 453px;     
display: table-cell;     
vertical-align: middle;
text-align: center;">Architecture</div>
                </a>
                </div>
            </div>

Answer 1

首先，您需要重新组织代码并添加一个类，该类将能够对包含图像的所有div执行相同的操作，前提是您希望使其具有响应性，因此不需要为这些元素中的每一个创建一个类，然后我建议交换onclick=“window.location=”/portfolio/architecture/architecture/”；“用于a href，因为您只需使用它来浏览页面，因此无需单击onclickhref即可。所有组合应如下所示：

<a href="/portfolio/architecture/architecture/" id="item" class="float-right">
    <img src="http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png" width="253" height="200"/>
</a>
<a href="/portfolio/architecture/architecture/" id="item" class="float-left">
    <img src="http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png" width="253" height="200"/>
</a>

然后将css放在主题的style.css文件中，该文件如下所示：

#item {
    width:453px;
    height:400px;
    margin: 0 20px 20px 0;
}
.float-left {float: left;}
.float-right {float: right;}
@media only screen and (max-width : 320px) {
    /* Your fix for smaller screen sizes example*/
    #item {
       width:253px;
       height:200px;
    }
    #item img {
       width:253px;
       height:200px;
    }
}

如果使用图像作为div背景仍然是一个优先事项，你可以使用这样的代码来代替：

<a href="/portfolio/architecture/architecture/">
    <div id="item1" class="responsive float-left"></div>
</a>
<a href="/portfolio/architecture/architecture/">
    <div id="item2" class="responsive float-right"></div>
</a>

CSS

#item1 {
    background-image: url('http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png');
}
#item2 {
    background-image: url('http://jeremy.insctest1.com/wp-content/uploads/2015/03/portrait-home.png');
}
.responsive {
    width:453px;
    height:400px;
    margin: 0 20px 20px 0;
}
.float-left {float: left;}
.float-right {float: right;}
@media only screen and (max-width : 320px) {
    /* Your fix for smaller screen sizes example*/
    .responsive {
        width:253px;
        height:200px;
    }
}