Question

如果我调整浏览器窗口的大小，左侧面板文本会隐藏在中心图片下面。

我该如何解决？

Answer 1

我正在查看Chrome开发者工具，但我实际上并未看到媒体查询中的任何一种样式的加载位置。您想要的显而易见的结果是，现在左侧面板是

position: absolute;
width: 50%;

当然，在此分辨率下，您希望宽度更小。您可以使用媒体查询更改标题建议的样式，但不会触发。你介意发布你的相关CSS，看看为什么 - 如果它存在 - 你的mq不工作？

从您的设计质量来判断我猜你肯定知道什么是媒体查询，但以防万一：

@media screen and (min-width: 1366px) {
  id.class { 
    width: 40%; // or whatever
  }
}

Answer 2

设置.ac-wrapper h2 30％而不是50％

.ac-wrapper h2 {
    width: 30%;
}

<强> EDITED

HTML

<div class="ac-device">
    <h2 style="color:#888888">Logical &amp; analytical. <span>Argues till someone <br>just walks away!</span></h2>
    <a href="#" title="What's different about me?"><img src="images/screen1.jpg"></a>
    <h3 class="ac-title">Not enough of an artist to work upon your imagination. Prefers to do stuff freely. Some may not like that, but that's the way I am!</h3>
</div>

CSS

.ac-wrapper h2 {
top: 20%;
width: 100%;
right: 100%;
position: absolute;
font-weight: 300;
font-size: 4em;
text-align: center;
padding: 0;
}

设置div宽度以调整不同的分辨率

2 个答案: