Как сделать так, чтобы мой веб-сайт выглядел так же, даже когда я изменяю размер своего браузера? - PullRequest
Новая
       85

Как сделать так, чтобы мой веб-сайт выглядел так же, даже когда я изменяю размер своего браузера?

1 голос
/ 03 августа 2020

Я создаю обманную страницу профиля Twitter, но я заметил, что каждый раз, когда я изменяю размер своего браузера, весь текст и изображения перемешиваются, что делает страницу действительно беспорядочной. Как сделать так, чтобы весь текст и изображение оставались на одном месте по отношению друг к другу и пропорционально уменьшались при изменении размера браузера. Я попытался использовать проценты для ширины и высоты div, но когда я изменил размер браузера, текстовая строка оборвалась, и часть текста вылилась из div и контейнеров. Я пробовал использовать vh вместо px, но контейнеры стали намного тоньше, когда я уменьшил страницу, и мне это не понравилось. У кого-нибудь есть решения? Кстати, я использую Bootstrap 4.0.

Это мой html: 

<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>StanCafe - Hello!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="profile.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/3b733e1950.js" crossorigin="anonymous"></script>


  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
      <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-home"></i> Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-star"></i> Snippets</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-bell"></i> Notifications</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><i class="fas fa-envelope"></i> Messages</a>
          </li>
        </ul>

        <a class="navbar-brand" href="#"><i class="fas fa-coffee"></i></a>

        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search StanCafe" aria-label="Search" id="search">
        </form>
        <a class="btn btn-primary" href="#" id="publish-button">Publish</a>
      </div>
      </div>
    </nav>

    <header>

      <div id="cover-photo-wrapper">
        <img src="background-image-cropped.png" alt="background-image">
      </div>

      <div id="profile-photo-wrapper">

        <div class="container">
          <div class="row">

            <div class="col-4">
              <img src="profile-picture-cropped.png" id="profile-photo" alt="profile-picture">
            </div>

            <div class="col-6">
              <a href="#" class="profile-stats">Posts<span>320</span></a>
              <a href="#" class="profile-stats">Following<span>600</span></a>
              <a href="#" class="profile-stats">Followers<span>900</span></a>
              <a href="#" class="profile-stats">Cafes<span>8</span></a>
            </div>

            <div class="col-2">
             <button type="button" class="btn btn-outline-primary" id="follow-button">Follow</button>
            </div>

          </div>
        </div>

      </div>

    </header>

    <div class="container">
      <div class="row">

        <div class="col-4" id="profile">
          <hgroup>
            <a href="#"><h1>Alya Tsarina</h1></a>
            <a href="#"><h2>@allina</h2></a>
          </hgroup>
          <p>Jennie stan but go off lol</p>
          <span id="location"><i class="fa fa-map-marker"></i> Moscow, Russia</span>
          <span id="website"><i class="fa fa-link"></i> <a href="#">allina.com</a></span>
          <span id="birthday"><i class="fas fa-birthday-cake"></i> Jan. 2020</span>
          <a class="btn btn-primary" href="#" id="message-button">Message</a>
          <a class="btn btn-primary" href="#" id="message-button">Edit Room</a>
          <span><i class="fas fa-coffee"></i> <a href="#">Cafes you follow</a><span>
          <div id="cafe-profile-photos">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <br />
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
            <img src="https://via.placeholder.com/50x50" alt="cafe image">
          </div>


        </div>

        <div class="col-8" id="posts">
          <nav class="nav">
            <a class="nav-link active" href="#">Posts</a>
            <a class="nav-link" href="#">Room Gallery</a>
            <a class="nav-link" href="#">Hearted</a>
          </nav>
          <article class="container">
            <div class="row no-gutters">

              <div class="col-1">
                <img src="profile-picture-cropped.png" alt="profile-picture" class="profile-thumbnail">
              </div>

              <div class="col-11 post-body">
                <a href="#" class="post-username"><span class="username-name">Alya Tsarina</span> <span class="username-handle">@allina</span></a>
                <p>Ya'll BlackPink's album is gonna pop off so baaaad! The queens of kpop are rly coming.</p>
                <nav>
                  <a href="#" class="comments"><i class="fa fa-comment-o"></i> 217</a>
                  <a href="#" class="repost"><i class="fa fa-retweet"></i> 38</a>
                  <a href="#" class="heart"><i class="fa fa-heart-o"></i> 1, 278</a>
                </nav>
              </div>

            </div>
          </article>

        </div>


      </div>
    </div>

  </body>

</html>

Это мой CSS: 

a, a:hover {
  color: rgb(29,161,242);
}

body {
  background-color: #E6ECF0;
}

.navbar {
  background-color: white;
  border-bottom: 1px solid #999;
}

.navbar-brand {
  margin-left: 50%;
  margin: 0px auto;
}

.navbar-brand i {
  color:rgb(29,161,242);
}

#search {
  background-color: #F5F8FA;
  border-radius: 20px;
  border: 1px solid #E6ECF0;
}

#search:focus {
  background-color: white;
  border: 2px solid rgb(29,161,242);
}

#publish-button {
  background-color: rgb(29,161,242);
  color: white;
  border-radius: 20px;
  border: none;
}

#publish-button:hover {
  background-color: #329CC3
}

#cover-photo-wrapper {
  height: 40vh;
  overflow: hidden;
}

#cover-photo-wrapper img {
  width: 100%;
}

#profile-photo-wrapper {
  background-color: white;
  border-bottom: 2px solid #CCC;
  height: 60px;
  position: relative;
}

#profile-photo {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 5px solid white;
  position: absolute;
  top: -110px;
}

.profile-stats {
  float: left;
  text-align: center;
  width: 80px;
  margin-top: 10px;
  margin-left: 4px;
  margin-right: 4px;
  text-decoration: none;
  color:#666;
  font-size: 0.8em;
}

.profile-stats:hover {
  text-decoration: none;
  border-bottom: 2px solid rgb(29,161,242)
}

.profile-stats:hover span {
  color: rgb(29,161,242);
}

 .profile-stats span {
  display: block;
  margin: 0px auto;
  font-size: 1.4em;
  color: #444;
  position: relative;
  top: -4px;
}

#follow-button {
  border-color: rgb(29,161,242);
  color: rgb(29,161,242);
  border-radius: 20px;
  margin-top: 10px;
  width: 100px;
  font-weight: bold;
  font-size: 0.8em;
}

#follow-button:hover {
  background-color: #329CC3;
  color: white;
}

#profile {
  margin-top: 35px;
}

#profile h1 {
  color: black;
  font-size: 1.2em;
  font-weight: bold;
}

#profile h2 {
  font-size: 1em;
  color: #333;
  font-weight: normal;
  position: relative;
  top: -6px;
}

#profile p {
  margin-top: 6px;
  font-size: 0.9em;
}

#profile span {
  display: block;
  color: #333;
  font-size: 0.9em;
  margin-bottom: 4px;
}

#profile span .fa {
  width: 15px;
}

#message-button {
  background-color: rgb(29,161,242);
  color: white;
  border-radius: 20px;
  border: none;
  margin-top: 12px;
  width: 100%;
  margin-bottom: 12px;
}

#message-button:hover {
  background-color: #329CC3
}

#cafe-profile-photos img {
  border-radius: 25px;
  margin-bottom: 4px;
}

#posts > nav {
  margin-top: 10px;
  background-color: white;
  padding: 10px 0px;
  border-bottom: 1px solid #E6ECF0;
}

#posts > nav a {
  font-size: 1.2em;
  font-weight: bold;
}

#posts > nav a.active {
  color: #222;
}

#posts > nav a:hover {
  text-decoration: underline;
}

#posts article {
  background-color: #FFF;
  border-bottom: 1px solid #E6ECF0;
  padding: 15px;
}

#posts article:hover {
  background-color: #F5F8FA;
}

#posts .profile-thumbnail {
  height: 50px;
  width: 50px;
  border-radius: 25px;
}

#posts .post-body {
  padding-left: 10px;
  font-size: 0.9em;
}

#posts .post-username .username-name {
  color: #333;
  font-weight: bold;
}

#posts .post-username:hover {
  text-decoration: none;
}

#posts .post-username:hover .username-name {
  text-decoration: underline;
  color: rgb(29,161,242);
}

#posts .post-username .username-handle {
  color: #333;
  font-weight: normal;
}

#posts .post-body nav a {
  color: #657786;
  padding: 0px 6px;
}

#posts .post-body nav a .fa {
  margin-right: 5px;
}

#posts .post-body nav a:hover {
  text-decoration: none;
  color: rgb(29,161,242);
}

Веб-сайт в полноэкранном режиме Веб-сайт с измененным размером

Ответы [ 2 ]

0 голосов
/ 03 августа 2020

примечание : я не изучил полностью весь код
, чтобы сделать его отзывчивым, попробуйте указать значения в%. Также попробуйте использовать медиа-запрос, например: 

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

или 

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
  width: 100%;
  }
}
0 голосов
/ 03 августа 2020

Bootstrap4 поставляется с множеством классов для c стилизации области просмотра. Вы также должны узнать больше о медиа-запросах, которые помогут вам задать стили для c ширины устройства.

...