Html Wordpress div在手机上响应

我定制了这个摄影网站的主页模板，其中包括4个div，以突出摄影师作品集的4个主要部分。在调整浏览器或移动设备的大小时，它们没有响应能力。我必须包括哪些内容才能使其响应？媒体查询最小最大值，不确定

地点：

其中一个部门：

div onclick=window.location='/portfolio/architecture/architecture/'；id=项目1样式=宽度：453px；高度：400px；背景图片：url；浮动：左；边距：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>

---

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

<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>

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

如果使用图像作为divs背景仍然是一个优先事项，则使用如下代码：

<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>

---

媒体查询就可以了。在这里，我刚刚回答了一个类似的问题，涉及你能不能格式化你发布的HTML？此外，它与hyperlink.im中的等效公文包架构不匹配，因此当我复制粘贴代码时，它不会显示所有内容，因此我删除了一些div标记，以便人们可以看到it@Chun我不确定这些媒体问题应该放在哪里这是一个很好的，但是我现在在不透明分区工作时遇到了问题，我的名字在分区中。例如：Architecture对不起，我不明白您面临的问题是什么。你能说得更具体一点吗？我试图使用你的补丁，它在大多数情况下都有效，如果你参考url，我有一个div，它有每个类别的标题，并且有一个不透明度，我试图找出如何用你的补丁设置样式，然后在媒体查询中为较小的屏幕设置你想要的不透明度。例如：。项目标题{opacity:1；}下面是一个示例。但是我认为你的不透明度是由rgb背景图像的颜色造成的，所以把这样的东西放进去。项目标题{背景图像：线性渐变到底部，rgba232，232，232，10%，rgba214，214，214，100%；}如果你想去除透明度，在媒体查询中就可以了。谢谢你，这似乎有效，但有一个问题。在firefox和IE上，不透明度标签让call显示在div的顶部，而不是底部。它正确地显示在div底部的Chrome中

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