如何使此页面响应答案

【问题标题】：how to make this page responsive如何使此页面响应
【发布时间】：2018-10-08 18:56:11
【问题描述】：

当我尝试调整屏幕大小时，图像旁边的列表超出了边框，页面底部的最后一个图像也超出了边框，我怎样才能让它响应呢？中小屏幕可以下图，这里是html页面的css代码

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
  display: flex;
  align-items: center;
}

.container {
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Employee's Page</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
</head>

<body>

    <h1>Ahmed Haiba</h1>

    <div class="container" style="border:1px solid #000000;">
        <div class="flexcontainer">
            <div>
                <img src="http://placehold.it/350x250">
            </div>
            <div>
                <ul>
                    <li>
                        <h3>Full name: Ahmed Haiba</h3>
                    </li>
                    <li>
                        <h3>Gender: Male</h3>
                    </li>
                    <li>
                        <h3>Phone number: +9980989798</h3>
                    </li>
                    <li>
                        <h3>Company: AST</h3>
                    </li>
                    <li>
                        <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3>
                    </li>
                </ul>
            </div>
        </div>

        <div>
            <h3>About employee:</h3>
            <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p>
        </div>

        <div>
            <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3>
        </div>

        <div>
          <img src="http://placehold.it/500x250">
        </div>
    </div>
</body>
</html>

如果您尝试调整屏幕大小，您会注意到只有列表超出了边框，并且底部的最后一个图像超出了边框，您能帮我解决这个问题吗？我希望在调整屏幕大小时列表能够显示图像

【问题讨论】：

标签： html css responsive

【解决方案1】：

首先，您需要将max-width: 100% 添加到img 选择器。这将防止所有图像超出其各自的容器。

这也解决了文本超出容器的问题，但会导致顶部图像在较窄的宽度下变得相当小。为了解决这个问题，我还建议添加一个媒体查询（比如768px），它会从.flexcontainer 中删除display: flex。我还建议将text-align: center 添加到包含两个图像的两个<div> 元素中，以便将它们水平居中。我已经为他们提供了.image 的课程，以使这更容易。

这可以在下面看到：

h1 {
  text-align: center;
}

ul {
  list-style: none;
}

.flexcontainer {
  display: flex;
  align-items: center;
}

.container {
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
}

img {
  max-width: 100%;
}

@media screen and (max-width: 768px) {
  .flexcontainer {
    display: block;
  }
  .image {
    text-align: center;
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Employee's Page</title>
  <link rel="stylesheet" href="./assets/css/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>

  <h1>Ahmed Haiba</h1>

  <div class="container" style="border:1px solid #000000;">
    <div class="flexcontainer">
      <div class="image">
        <img src="http://placehold.it/350x250">
      </div>
      <div>
        <ul>
          <li>
            <h3>Full name: Ahmed Haiba</h3>
          </li>
          <li>
            <h3>Gender: Male</h3>
          </li>
          <li>
            <h3>Phone number: +9980989798</h3>
          </li>
          <li>
            <h3>Company: AST</h3>
          </li>
          <li>
            <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3>
          </li>
        </ul>
      </div>
    </div>

    <div>
      <h3>About employee:</h3>
      <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est
        anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p>
    </div>

    <div>
      <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3>
    </div>

    <div class="image">
      <img src="http://placehold.it/500x250">
    </div>
  </div>
</body>

</html>

【讨论】：

完美，非常感谢您的时间和精力。您的代码完美运行:)
我还建议使用viewport meta tag。一个常用版本的例子是<meta name="viewport" content="width=device-width, initial-scale=1">

【解决方案2】：

您应该像这样使用媒体查询并将.flexcontainer显示为display: block;。

试试这个：https://jsfiddle.net/o762ct48/

@media screen  and (max-width: 767px){
    .flexcontainer {
        display: block;
        align-items: center;
    }
}

【讨论】：

【解决方案3】：

如果您想让您的页面响应，您还应该尝试使页面中的图像响应视口大小。

在大宽度显示中看起来不错的图像可能在小宽度显示中看起来不太好，反之亦然。

此链接将帮助您学习和了解如何使图像具有响应性：

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

https://www.w3schools.com/tags/att_source_srcset.asp

【讨论】：

感谢您的建议，我会看看您提供的链接:)