段落对于移动视图来说太大（响应式设计）

Question

我对这一切都是陌生的。试图阻止我的文字在移动设备上显示。一旦我更改 CSS 中的文本宽度，就会出现此问题。我不希望文本在桌面视图中一直延伸到整个屏幕。

显然我的 post 主要是代码，我需要更多详细信息

下面是桌面和移动屏幕截图。

桌面：

手机：

HTML: <!DOCTYPE html>
<html>
  <head>
    <title>Day on the Pier</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="Style.css" />
  </head>

  <body>
    <header>
      <ul>
        <li>
          <a href="Portfolio.html"
            >HOME</a
          >
        </li>
        <li>
          <a href="experience.html"
            >EXPERIENCE</a
          >
        </li>
        <li>
          <a href="About%20me.html"
            >ABOUT ME</a
          >
        </li>
        <li>
          <a href="/Blog.html">BLOG</a>
        </li>
      </ul>
    </header>

    <main>
      <h1>25/02/22 A day on the Pier</h1>
      <img src="img/pier1.jpg" alt="pier" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      </p>
    </main>

    <footer>
      <ul>
        <li>© L D</li>
        <li>hhhh@gmail.com</li>
      </ul>
    </footer>
  </body>
</html>

CSS:

    p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  width: 600px;
  
}


@media only screen and (max-width: 480px) {
  header ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
  }

  @media only screen and (max-width: 480px) {
    body {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
  }
 

@media only screen and (max-width: 480px) {
    footer ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
    }
  }
}

Answer 1

您在没有媒体查询的情况下定义了段落宽度。

p {
  /* ... */
  width: 600px;
}

即使在移动设备上，每个段落的宽度也是 600 像素。

您需要设置媒体查询以仅限制桌面的宽度，或者使用“更好”的规则

p {
  /* ... */
  max-width: 600px;
}

有了它，您的文字将永远不会大于 600 像素，但在移动设备上会更小。

Answer 2

你可以这样试试

p {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  max-width: 600px;
  text-align:center;
  width:100%;
  height:auto;
  margin:0 auto;
  
}

main { 
text-align:center
}

img {
  max-width:600px;
  width:100%;
  height:auto;
  margin:0 auto;
 }
 
@media only screen and (max-width: 480px) {
  header ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
  }

p {
font-size:16px;
}

    footer ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin: 0;
      padding: 0;
    }
  }

<main>
      <h1>25/02/22 A day on the Pier</h1>
      <img src="https://st2.depositphotos.com/3791047/5689/i/600/depositphotos_56899783-stock-photo-girls-sitting-on-the-bench.jpg" alt="pier" />
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      </p>
      
      <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </main>

段落对于移动视图来说太大（响应式设计）

Paragraph stays too big for a mobile view (responsive design)

html

css

responsive