как сделать эту страницу отзывчивой - PullRequest
Новая
       0

как сделать эту страницу отзывчивой

0 голосов
/ 08 октября 2018

когда я пытаюсь изменить размер экрана, список рядом с изображением выходит за границы, а также последнее изображение в нижней части страницы выходит за границы, как я могу сделать так, чтобы оно реагировало такможет уменьшать изображение, когда экран маленький или средний, вот код 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>

Если вы попытаетесь изменить размер экрана, вы заметите, что выходит за пределы только список, а последнее изображение в нижней его части исчезает.границы, вы можете помочь мне решить эту проблему?Я хочу, чтобы список уменьшал изображение при изменении размера экрана

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

Вы должны использовать медиазапрос, подобный этому, и настроить отображение от .flexcontainer до display: block;.

. Попробуйте: https://jsfiddle.net/o762ct48/

@media screen  and (max-width: 767px){
    .flexcontainer {
        display: block;
        align-items: center;
    }
}
0 голосов
/ 08 октября 2018

Если вы хотите, чтобы ваша страница реагировала, вы должны также попытаться сделать изображения на странице адаптивными к размеру области просмотра.

Изображение, которое выглядит великолепно на большом экране, может не очень хорошо смотреться на маленькомширина дисплея наоборот.

Эти ссылки помогут вам узнать и понять, как сделать изображение адаптивным:

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

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

0 голосов
/ 08 октября 2018

Сначала вы захотите добавить max-width: 100% к селектору img.Это предотвратит выход всех изображений за пределы соответствующих контейнеров.

Это также решит проблему с текстом, выходящим за пределы контейнера, но приведет к тому, что верхнее изображение станет довольно маленьким при узкой ширине.Чтобы решить эту проблему, я бы также рекомендовал добавить медиа-запрос (скажем, 768px), который удаляет display: flex из .flexcontainer.Я также рекомендовал бы добавить 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>
...