h1 header 标题没有响应我的网站

Question

设计响应式网站时一切顺利，直到我决定开始使用 font-family、font-size 及其 letter-spacing 来根据我选择的设计来设计我的 header 样式根据我的喜好，然后当我将它的大小调整为小于 600px.

时，一切都变得有点奇怪

为什么我的 header 现在以一种奇怪的方式从我的 <body></body> 中伸出来，尽管我的 <div class = "header></div> 仍在 <body></body> 标签内。 查看截图如有任何帮助，我们将不胜感激。

这是我的HTML和CSS

*{
 box-sizing: border-box;
}

body {
 width: 100%;
 height: 100%;
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
 background-color: #ccccff;
 text-align: center;
 padding: 80px;
}

.header h1 {
 font-size: 68px;
 font-family: "Lucida Console", Monaco, monospace;
 letter-spacing: 10px;
}

/* The main content section */

.content {
 padding: 10px;
 background: #e6e6e6;
}

.content h2 {
 text-align: center;
}

.content p {
 margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* This is the footer section */
footer {
 width: 100%;
 height: 100%;
 padding: 50px;
 text-align: center;
 background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
 .column {
  width: 100%;
 }
}

<!DOCTYPE html>
<html>
<head>
 <title>Title Page</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <!-- This is a header -->
 <div class="header">
  
  <h1>Website Title</h1>
  <p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>

 </div>

 <!-- This is the main content -->
 <div class="content">

  <!-- About section -->

  <h2>About</h2>
  <p>
   Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
  </p>

  <!-- 3 column responsive layout -->

  <div class="row">

    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>
       Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
      </p>
      <ul>
       <li>Skill 1</li>
       <li>Skill 2</li>
       <li>Skill 3</li>
       <li>Skill 4</li>
       <li>Skill 5</li>
      </ul>
      
    </div>


    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>
       Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
      </p>
      <ul>
       <li>Skill 1</li>
       <li>Skill 2</li>
       <li>Skill 3</li>
       <li>Skill 4</li>
       <li>Skill 5</li>
      </ul>
      
    </div>


    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
      <p>
       Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
      </p>
      <ul>
       <li>Skill 1</li>
       <li>Skill 2</li>
       <li>Skill 3</li>
       <li>Skill 4</li>
       <li>Skill 5</li>
      </ul>
      
    </div>

  </div>



 </div>

 <!-- This is the footer -->
 <div class="footer">
  <footer>
   Person Name &copy; 2019
  </footer>
 </div>

</body>
</html>

Answer 1

类型太大，无法在提供的 space 中呈现。您有几个选择：减小字体大小，或告诉浏览器使用 word-break: break-word 在字边界之前拆分文本。

Answer 2

这是代码。希望它会有所帮助 you.You 只需要将 css 放入 .header 和 .header h1 的媒体查询中类以减少填充作为字体大小。如果有任何变化，请告知。

*{
 box-sizing: border-box;
}

body {
 width: 100%;
 height: 100%;
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
}

/* The header section */

.header {
 background-color: #ccccff;
 text-align: center;
 padding: 80px;
}

.header h1 {
 font-size: 68px;
 font-family: "Lucida Console", Monaco, monospace;
 letter-spacing: 10px;
}

/* The main content section */

.content {
 padding: 10px;
 background: #e6e6e6;
}

.content h2 {
 text-align: center;
}

.content p {
 margin: 30px;
}

/* Three equal columns */

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* This is the footer section */
footer {
 width: 100%;
 height: 100%;
 padding: 50px;
 text-align: center;
 background: lightgreen;
}

/* Responsive design starts here */

@media only screen and (max-width: 768px) {
 .column {
  width: 100%;
 }
  .header{
  padding: 10px;
  }
  .header h1{
  font-size:40px;
  }
}

<!DOCTYPE html>
<html>
<head>
 <title>Title Page</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <!-- This is a header -->
 <div class="header">
  
  <h1>Website Title</h1>
  <p>Dolor sed veniam minim eiusmod sint labore elit lilamco dolor in in dolor clipa occaecat do.</p>

 </div>

 <!-- This is the main content -->
 <div class="content">

  <!-- About section -->

  <h2>About</h2>
  <p>
   Lorem ipsum clipa nlila tempor amet dolor clipa magna commodo minim. Sed ut lilamco veniam est esse tempor in anim excepteur lilamco excepteur deserunt ad. Lorem ipsum tempor eiusmod nisi consectetur magna cupidatat in ad velit clipa aliqua id sunt clipa nlila aliqua laboris.
  </p>

  <!-- 3 column responsive layout -->

  <div class="row">

    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <p>
       Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
      </p>
      <ul>
       <li>Skill 1</li>
       <li>Skill 2</li>
       <li>Skill 3</li>
       <li>Skill 4</li>
       <li>Skill 5</li>
      </ul>
      
    </div>


    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <p>
       Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
      </p>
      <ul>
       <li>Skill 1</li>
       <li>Skill 2</li>
       <li>Skill 3</li>
       <li>Skill 4</li>
       <li>Skill 5</li>
      </ul>
      
    </div>


    <div class="column" style="background-color:#ccc;">
      <h2>Column 3</h2>
      <p>
       Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam duis nisi tempor.
      </p>
      <ul>
       <li>Skill 1</li>
       <li>Skill 2</li>
       <li>Skill 3</li>
       <li>Skill 4</li>
       <li>Skill 5</li>
      </ul>
      
    </div>

  </div>



 </div>

 <!-- This is the footer -->
 <div class="footer">
  <footer>
   Person Name &copy; 2019
  </footer>
 </div>

</body>
</html>

h1 header 标题没有响应我的网站

The h1 header title is not being responsive to my website

html

css

responsive-design

responsive