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

Question

请检查此链接

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

我如何解决它？

Answer 1

设置.ac-wrapper h230% 而不是 50%

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

已编辑

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

Answer 2

我正在查看 Chrome 开发工具，但实际上我没有看到媒体查询中的任何点样式正在加载。您想要的明显结果是现在左侧面板是

position: absolute;
width: 50%;

当然，在这个分辨率下，您希望该宽度更小。您可以通过媒体查询更改标题所暗示的样式，但没有触发。你介意发布你的相关 CSS 来看看为什么 - 如果它存在 - 你的 mq 不工作吗？

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

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