1

您好，感谢您的阅读，我正在构建这个网站http://myspacioclub.com并使用 wordpress 响应式主题，我得到了这张图片“bannerfb”，上面有“banner”类，是客户要求的。因此，在徽标的空间内，我创建了一个新的 div 来放置横幅并将此属性添加到横幅的 div 中：

.banner { position:relative; top:-170px; left:450px; }

但是由于主题是响应式的，当我将窗口缩小到平板电脑或手机的大小时，布局会中断，有人可以帮我吗？如何修复仅在窗口分辨率较大时使用横幅属性的主题，或任何类似的解决方案，但想法是保持横幅具有这些属性而不受较小尺寸的影响。

4

1 回答 1

1

您可以通过不同的方式实现此目的，但一种方法如下：首先将您的徽标和横幅包装在一个 div 中

<div class="wrap">
    <div class="logo">
        <a href="">
            <img src="http://myspacioclub.com/wp-content/uploads/2013/04/Myspacioclub.png"/>
        </a>
    </div>
    <div class="banner">
        <img src="http://myspacioclub.com/wp-content/uploads/2013/04/bannerfb.jpg"/>
    </div>
</div>

然后添加以下CSS：

.wrap {
    position: relative;
    width: 100%;
}
.logo {
    width: 50%;
    float: left;
}
.banner {
    width: 50%;
    float: right;
}
.banner img, .logo img {
    width: 100%;
    height: 100%;
}

您可以在此处查看工作示例。另外，我必须指出，至少目前您在横幅中使用了超过 7000 像素宽度的图像。这不是你应该做的。你的横幅，至少在我的屏幕上，是 700 像素宽。永远不要使用比您需要的更大的图像。它显示 700px 宽的图像，但您仍然需要加载 7000px 的图像。转换成更小的尺寸！如果大屏幕需要更大的图像，您可以使用 javascript 或 css@media标签为不同的屏幕尺寸加载不同的图像。为此，您必须将横幅图像设置为背景而不是背景<img>，然后在 CSS 中执行以下操作：

@media only screen and (min-width: 35em){
    /* Style adjustments for viewports that meet the condition */
    .banner { background: url(path/to/image); }
}

您可以像这样设置许多步骤。只需添加另一个，更改min-width并将不同的图像加载到背景。

因此，在您的页面中，您必须在 CSS 中执行以下操作：

@media (min-width: 1320px){
    .span8 { width:1178px; }
}
    .name-logo, .banner { width: 50%; }
    .banner img { width: 100%; height: 100% }
    .name-logo img { width: auto; height: auto; }
    .name-logo { float: left; }
    .banner { float: right; }

响应式布局的技巧是使用百分比值而不是固定像素值，并且尽可能不要使用负边距。

于 2013-04-24T04:58:32.593 回答