0

首先想说的是，我不是前端工程师，我的UI和UX技能都非常低。

所以我的问题是：我有一个 divp里面有标签。我想width: 700px在浏览器窗口最大化时拥有它。但是如果我把这个属性放在我的 div 的 CSS 中。如果我调整窗口大小，文本不会缩小。所以我想在窗口最大化时让它达到某个点，如果你调整窗口大小，我想缩小它，而不影响侧边栏 div。

为了更清楚，我会给你一个例子：

最大化浏览器窗口：

在此处输入图像描述

最小化浏览器窗口：

在此处输入图像描述

HTML

 <!-- HOME -->
  <div id="home" class="content">
   <h2>Home</h2>
   <p>AAAAAAAAAAAAAAAAAAA</p>
   <p>BBBBBBBBBBBBBBBBBBBB</p>
  </div>

CSS

.content {
    padding-bottom: 30px;
    position: absolute;
    left: 280px;
    right: 40px;
    top: 0px;
}
.content h2 {
    font-size: 110px;
    color: #fff;
    color: rgba(255,255,255,0.9);
    padding: 10px 0 20px 0;
    margin-top: 50px; 
}
.content p {
    color: black;
    font-size: 16px;
    line-height: 24px;
    display: inline-block;
}
4

2 回答 2

2

你想要的是媒体查询。看看 W3C 对他们的建议。

基本上，语法如下：

@media screen and (min/max-width: ){ 
  //do something

}

这些被称为“断点”。这意味着，在浏览器达到您提供的最小/最大宽度时，您可以否决其他 css。所以你可以让你的p和div大小不同。

    @media screen and (min/max-width: ){ 

      div {
          width: 200px;
       }

       p {
          font-size: 20px;
       }
    }

还可以查看Smashing Magazine的关于如何使用它们的教程。

于 2013-01-06T00:12:17.210 回答
2

您不需要在您的情况下使用媒体查询，但在更复杂的情况下会出现这种情况（例如不同的断点）。

只需使用max-width: 700px，你就完成了。

正常行为：您的段落永远不会超过 700 像素。
由于宽度非常小，段落与任何块元素一样占据整个宽度，并且仍然小于 700 像素，因此不需要 MQ！

请参阅此小提琴以使其生效： http: //jsfiddle.net/LQbgJ/（我使用 200px 而不是 700）
兼容性应该是 IE7+

于 2013-01-06T00:22:59.913 回答