調整到小於 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