Question

当我调整浏览器大小时，我会在内容下方获得侧边栏，但看起来不错，但p标签中的文字不能正确调整大小。我应该以某种方式瞄准p元素吗？这是代码：

HTML

<div id="wrapper">
<div id="header">
    <h1>Header</h1>
</div>

<div id="menu">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

<div id="content">
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>

<div id="sidebar">
    <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
</div>

<div id="footer">
    Copyright &copy; 2016       
</div>

CSS

 @media screen and (max-width: 480px) {

 #menu {
    display: none;
 }

 #sidebar  {
    width: 100%;
}

 #content {
    width:100%;
}


}

主要CSS

    body {
    background-color: grey;
}

#wrapper {
    width: 960px;
    height: 0 auto;
    margin: 0 auto;
    background-color: #27ae60;
}

#header h1 {
    background-color: #c0392b;
    text-align: center;
    color: #fff;

}

#content {

    width: 600px;
    height: 500px;
    background-color: #e67e22;
    float: left;
}

#sidebar {

    width: 360px;
    height: 500px;
    background-color: #34495e;
    float: right;
}

#footer {

    clear: both;
    height: 30px;
    background-color: #e74c3c;
    padding-left: 50px;
    padding-top: 20px;

}

p {
    color: #fff;
    text-align: left;
    padding: 20px;
}

Answer 1

将此添加到您的CSS：

p {
    text-align: justify;
}

Answer 2

在主CSS中查看此规则：

#wrapper {
    width: 960px;
    [...]
}

包装纸宽960像素。媒体查询中没有#wrapper的规则，因此在小屏幕上它将保持960px宽。 #content在小屏幕上是100％宽，所以它也是960px（因为#content在#wrapper内），<p>内的#content标签也是如此{1}}：它们总是100％= 960px宽。

解决方案：为小屏幕（即媒体查询）插入#wrapper规则，并同时提供width: 100%;

css媒体查询响应

2 个答案: