基于 Flexbox 的站点水平溢出内容

Question

我的网站内容在移动显示器上溢出。我已经使用 Chrome 开发工具来查看。它使用元标记视口设置为 initial-scale=1.0 和 width=device-width，但无论我做什么它都会溢出。这是什么原因造成的，我该如何解决？

body {
  height: 100%;
  margin: auto;
  max-width: 1000px;
}

hr {
  border: 0;
  border-radius: 25px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(251, 140, 0, 1), rgba(0, 0, 0, 0));
}

h1,
h2 {
  font-weight: 400;
  letter-spacing: 1px;
}

h3 {
  font-weight: 400;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.logo {
  order: -1;
  width: 20%;
}

.header {
  order: 0;
  text-align: right;
  text-transform: uppercase;
  width: 80%;
}

.header>h1 {
  margin-bottom: .07em;
  font-family: 'Mina', sans-serif, default;
}

.break-line {
  order: 1;
  width: 100%;
}

.main-image {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.featured-work {
  margin: 1.5em auto;
  min-height: 150px;
  order: 3;
  width: 100%;
}

.featured-work>h2 {
  font-family: sans-serif, default;
  width: 100%;
}

.work {
  min-height: 50px;
  text-align: center;
  width: 31%;
}

.work>picture>img {
  height: auto;
  width: 100%;
}

.work>h3 {
  margin-top: .5em;
  text-transform: uppercase;
}

.work>a>p {
  margin-top: -0.8em;
}

.horizontal-break {
  width: 3.5%;
}

#main-image-container {
  order: 2;
}

@media screen and (max-width: 450px) {
  body {
    font-size: .9em
  }
  hr {
    height: 1px;
    margin-bottom: 5%;
  }
  .header {
    margin-top: -3%;
  }
  .header>h1 {
    margin-bottom: -0.5%;
  }
  .work>h3 {
    font-size: .8em;
  }
  .work>a>p {
    font-size: .6em;
    min-height: 45px;
    min-width: 45px;
  }
}

@media screen and (min-width: 451px) {
  body {
    font-size: 1em
  }
  hr {
    height: 2px;
    margin-bottom: 4%;
  }
  .work>h3 {
    font-size: .9em;
  }
  .work>a>p {
    font-size: .7em;
  }
}

@media screen and (min-width: 701px) {
  body {
    font-size: 1.25em
  }
  hr {
    height: 3px;
    margin-bottom: 3%;
  }
  .work>h3 {
    font-size: 1em;
  }
  .work>a>p {
    font-size: .8em;
  }
}

@media screen and (min-width: 1000px) {
  .work>h3 {
    font-size: 1.25em;
  }
}

<div class="container">

  <picture class="logo">
    <source media="(max-width: 450px)" srcset="img/logo_small.png">
    <source media="(max-width: 700px)" srcset="img/logo_medium.png">
    <img src="img/logo.png" alt="The logo of the site.">
  </picture>

  <header class="header">
    <h1>Chris Maris</h1>
    <p>Front-end Warrior</p>
  </header>

  <div class="break-line">
    <hr>
  </div>

  <picture id="main-image-container">
    <source media="(max-width: 450px)" srcset="img/main_image_small.jpg">
    <source media="(max-width: 700px)" srcset="img/main_image_medium.jpg">
    <img class="main-image" src="img/main_image.jpg" alt="A laptop in a desk with flowers.">
  </picture>

  <section class="featured-work container">

    <h2>Featured Work</h2>

    <div class="work">

      <picture>
        <source media="(max-width: 450px)" srcset="img/beach_small.jpg">
        <source media="(max-width: 700px)" srcset="img/beach_medium.jpg">
        <img src="img/beach.jpg" alt="A beach in the summer.">
      </picture>

      <h3>Beach Locator</h3>
      <a href="https://github.com/christosmr" target="_blank">
        <p>https://github.com/beach-locator</p>
      </a>

    </div>

    <div class="horizontal-break"></div>

    <div class="work">

      <picture>
        <source media="(max-width: 450px)" srcset="img/factory_small.jpg">
        <source media="(max-width: 700px)" srcset="img/factory_medium.jpg">
        <img src="img/factory.jpg" alt="A factory with a grey background full of smoke.">
      </picture>

      <h3>Factory</h3>
      <a href="https://github.com/christosmr" target="_blank">
        <p>https://github.com/factory</p>
      </a>

    </div>

    <div class="horizontal-break"></div>

    <div class="work">

      <picture>
        <source media="(max-width: 450px)" srcset="img/sunflower_small.jpg">
        <source media="(max-width: 700px)" srcset="img/sunflower_medium.jpg">
        <img src="img/sunflower.jpg" alt="A sunflower in sunny day.">
      </picture>

      <h3>SunNYflower</h3>
      <a href="https://github.com/christosmr" target="_blank">
        <p>https://github.com/SunNYflower</p>
      </a>

    </div>

  </section>

</div>

Answer 1

只需在 head 标签之间添加这一行

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

因为.workdiv里面的内容重叠了。 这会使您的网站在移动设备显示屏上溢出。

您可以通过将 word-wrap: break-word; 属性添加到 work 选择器来避免这种情况。

这是工作代码

另外我在你的作品中添加了一些space来查看结果

body {
 height: 100%;
 margin: auto;
 max-width: 1000px;
}
hr {
 border: 0;
 border-radius: 25px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(251, 140, 0, 1), rgba(0, 0, 0, 0));
}
h1, h2 {
 font-weight: 400;
 letter-spacing: 1px;
}
h3 {
 font-weight: 400;
}
.container {
 display: flex;
 flex-wrap: wrap;
 width: 100%;
 padding: 15px;
 max-width: 100%;
 overflow: hidden;
 box-sizing: border-box;
}
.logo {
 order: -1;
 width: 20%;
}
.header {
 order: 0;
 text-align: right;
 text-transform: uppercase;
 width: 80%;
}
.header>h1 {
 margin-bottom: .07em;
 font-family: 'Mina', sans-serif, default;
}
.break-line {
 order: 1;
 width: 100%;
}
.main-image {
 height: auto;
 object-fit: contain;
 width: 100%;
}
.featured-work {
 margin: 1.5em auto;
 min-height: 150px;
 order: 3;
 width: 100%;
}
.featured-work>h2 {
 font-family: sans-serif, default;
 width: 100%;
}
.work {
 min-height: 50px;
 text-align: center;
 width: 31%;
 word-wrap: break-word;
}
.work>picture>img {
 height: auto;
 width: 100%;
}
.work>h3 {
 margin-top: .5em;
 text-transform: uppercase;
}
.work>a>p {
 margin-top: -0.8em;
}
.horizontal-break {
 width: 3.5%;
}
#main-image-container {
 order: 2;
}

@media screen and (max-width: 450px) {
  body {
    font-size: .9em
  }
  hr {
    height: 1px;
    margin-bottom: 5%;
  }
  .header {
    margin-top: -3%;
  }
  .header>h1 {
    margin-bottom: -0.5%;
  }
  .work>h3 {
    font-size: .8em;
  }
  .work>a>p {
    font-size: .6em;
    min-height: 45px;
    min-width: 45px;
  }
}

@media screen and (min-width: 451px) {
  body {
    font-size: 1em
  }
  hr {
    height: 2px;
    margin-bottom: 4%;
  }
  .work>h3 {
    font-size: .9em;
  }
  .work>a>p {
    font-size: .7em;
  }
}

@media screen and (min-width: 701px) {
  body {
    font-size: 1.25em
  }
  hr {
    height: 3px;
    margin-bottom: 3%;
  }
  .work>h3 {
    font-size: 1em;
  }
  .work>a>p {
    font-size: .8em;
  }
}

@media screen and (min-width: 1000px) {
  .work>h3 {
    font-size: 1.25em;
  }
}

<div class="container">
    <picture class="logo">
        <source media="(max-width: 450px)" srcset="img/logo_small.png" />
        <source media="(max-width: 700px)" srcset="img/logo_medium.png" />
        <img src="img/logo.png" alt="The logo of the site."> </picture>
    <header class="header">
        <h1>Chris Maris</h1>
        <p>Front-end Warrior</p>
    </header>
    <div class="break-line">
        <hr>
    </div>
    <picture id="main-image-container">
        <source media="(max-width: 450px)" srcset="img/main_image_small.jpg" />
        <source media="(max-width: 700px)" srcset="img/main_image_medium.jpg" />
        <img class="main-image" src="img/main_image.jpg" alt="A laptop in a desk with flowers."> </picture>
    <section class="featured-work container">
        <h2>Featured Work</h2>
        <div class="work">
            <picture>
                <source media="(max-width: 450px)" srcset="img/beach_small.jpg" />
                <source media="(max-width: 700px)" srcset="img/beach_medium.jpg" />
                <img src="img/beach.jpg" alt="A beach in the summer."> </picture>
            <h3>Beach Locator</h3>
            <a href="https://github.com/christosmr" target="_blank">
            <p>https://github.com/beach-locator</p>
            </a> 
        </div>
        <div class="horizontal-break"></div>
        <div class="work">
            <picture>
                <source media="(max-width: 450px)" srcset="img/factory_small.jpg" />
                <source media="(max-width: 700px)" srcset="img/factory_medium.jpg" />
                <img src="img/factory.jpg" alt="A factory with a grey background full of smoke."> </picture>
            <h3>Factory</h3>
            <a href="https://github.com/christosmr" target="_blank">
            <p>https://github.com/factory</p>
            </a> 
        </div>
        <div class="horizontal-break"></div>
        <div class="work">
            <picture>
                <source media="(max-width: 450px)" srcset="img/sunflower_small.jpg" />
                <source media="(max-width: 700px)" srcset="img/sunflower_medium.jpg" />
                <img src="img/sunflower.jpg" alt="A sunflower in sunny day."> </picture>
            <h3>SunNYflower</h3>
            <a href="https://github.com/christosmr" target="_blank">
            <p>https://github.com/SunNYflower</p>
            </a> 
      </div>
    </section>
</div>

基于 Flexbox 的站点水平溢出内容

Flexbox based site overflows content horizontally

html

css

overflow

width

flexbox