Question

我定制了这个摄影网站的主页模板，包括4个div，以突出摄影师的4个主要部分。在调整浏览器或移动设备时，它们无响应。为了使它们具有响应性，我需要包括哪些内容？（媒体查询最小值，不确定）

网站：http://jeremy.insctest1.com

其中一个div：

div onclick =＆＃34; window.location =＆＃39; / portfolio / architecture / architecture /＆＃39;;＆＃34; ID =＆＃34; ITEM1＆＃34;风格=＆＃34;宽度：453px;高度：400像素;背景图像：网址（＆＃39; http://jeremy.insctest1.com/wp-content/uploads/2015/02/arch-home.png＆＃39）;向左飘浮;保证金：0 20px 20px 0;＆＃34;＆gt;

                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，因为您只是使用它来导航页面所以不需要onclick 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>

然后将你的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;
    }
}

Wordpress div响应移动

1 个答案: