调整到小于 600 像素时，段落不响应 100% 宽度

Question

到目前为止，就设计而言，一切看起来都很棒。 当我调整浏览器大小时，页眉、页脚和我的 3 列堆栈会响应。 我唯一喜欢做的就是让我的div="content"段落在 600px 或更少时适应其宽度的 100%。

我应该怎么做才能添加或更改我的 CSS 以使其在移动设备中适合该段落？

 *. { width: 100%; } body { font-family: Andale Mono, monospace; margin: 0; } p { font-size: 24px; } .header { padding-top: 200px; padding-bottom: 200px; text-align: center; background-color: #001f4d; } .header h1 { font-size: 64px; color: white; width: 100%; } .header p { color: white; } .footer { font-size: 24px; padding-top: 50px; padding-bottom: 50px; text-align: center; background-color: #00cc44; } /* Begin main-content */ .content { background: #0d0d0d; padding: 80px; color: white; } .about-me { margin-left: 300px; margin-right: 300px; } .column { float: left; width: 33.33%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media screen and (max-width: 1200px) { body { width: 100%; } .about-me p { /*width: 100%;*/ /*margin: auto;*/ } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media screen and (max-width: 600px) { body { width: 100%; } #main-paragraph { width: 100%; } .about-me p { /*width: 100%;*/ /*margin: auto;*/ } .column { width: 100%; display: block; margin-bottom: 20px; } }

 <!DOCTYPE html> <html> <head> <title>Doug Cannon's Biography</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="header"> <h1>My Website</h1> <p>Welcome to my website.</p> </div> <div class="content"> <div class="about-me"> <h2 style="font-size: 36px;"><center>About Me</center></h2> <p>Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis.</p> </div> <br><br><br> <!-- Responsive column cards --> <div class="row"> <div class="column" style="background-color:#aaa;"> <h2>Column 1</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#bbb;"> <h2>Column 2</h2> <p>Some text..</p> </div> <div class="column" style="background-color:#ccc;"> <h2>Column 3</h2> <p>Some text..</p> </div> </div> </div> <!-- End main-content --> <div class="footer"> <footer> Copyright places here because it is cool <span class="highlight">&copy; 2019</span> </footer> </div> </body> </html>

Answer 1

在你的css中添加这个：

@media only screen and (max-width: 600px){
    .about-me {
        margin-left: 0;
        margin-right: 0;
    }
}

调整到小于 600 像素时，段落不响应 100% 宽度

问题描述

1 个解决方案

解决方案1
0 2019-12-16 01:44:45

调整到小于 600 像素时，段落不响应 100% 宽度

问题描述

1 个解决方案

解决方案1 0 2019-12-16 01:44:45

解决方案1
0 2019-12-16 01:44:45