Question

我创建了一个网站，当在iPad或iPhone上观看时（例子），它没有调整大小以适应屏幕。它将我的文本框（带有名称和社交媒体按钮）放在左侧，将我的背景图像放在右侧（这两个元素之间有空格）。我希望该网站在纵向和横向以及桌面浏览器上查看时都能正常工作（使用浏览器窗口调整大小）

如何在我的代码中实现它？

HTML：

 <head>
   <meta charset="UTF-8">
   <title>My site!</title>
   <link href="background.css" rel="stylesheet" type="text/css">
 </head>

 <body>
   <section class="background">
    <div class="foreground">
     <div class="name-tag">MY SITE!
     </div>
      <ul class="social-media-list">
        <li class="social-media-link">
          <a href="https://twitter.com/" target=_blank"><img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/twitter-128.png"></a>
    </li>
    <li class="social-media-link">
      <a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
    </li>
    <li class="social-media-link">
      <a href="https://www.linkedin.com/in/" target=_blank"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
    </li>
    <li class="social-media-link">
      <a href="https://www.instagram.com/" target=_blank"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
    </li>
  </ul>
</div>
  </section>
 </body>

 </html>

CSS：

   /* Body Margin*/

body {
  margin: 0;
 }


 /*  Font family avenir-light*/

 @font-face {
   font-family: 'avenir-light';
  src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
}


 /* Background Div*/

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}


 /* Background Div: after*/

.background:after {
   position: absolute;
   width: 100vw;
   height: 100vh;
   content: '';
   background-image: url("bkgd.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   -webkit-animation: fadein 3s;
   /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s;
    /* Firefox < 16 */
    -ms-animation: fadein 3s;
   /* Internet Explorer */
   -o-animation: fadein 3s;
   /* Opera < 12.1 */
   animation: fadein 3s;
   /*Fade In Animation*/
 }


 /* Fade in animations */

 @keyframes fadein {
   from {
     opacity: 0.2;
   }
   to {
     opacity: 1;
   }
}


 /* Firefox < 16 */

 @-moz-keyframes fadein {
   from {
    opacity: 0.2;
   }
   to {
     opacity: 1;
   }
 }


  /* Safari, Chrome and Opera > 12.1 */

  @-webkit-keyframes fadein {
    from {
     opacity: 0.2;
       }
    to {
     opacity: 1;
   }
 }


 /* Internet Explorer */

 @-ms-keyframes fadein {
   from {
     opacity: 0.2;
   }
   to {
     opacity: 1;
   }
 }


 /* Opera < 12.1 */

 @-o-keyframes fadein {
   opacity: 0.2;
 }

 to {
   opacity: 1;
 }


 /* Foreground div */

 .foreground {
   margin-top: 20px;
   position: relative;
   width: 400px;
   height: 100px;
    background-color: #eaeaea;
    padding: 20px;
    border: 1px solid #555;
     border-radius: 10px;
   /*Fade In Animation*/
   -webkit-animation: fadein 5s;
   /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 5s;
   /* Firefox < 16 */
   -ms-animation: fadein 5s;
   /* Internet Explorer */
   -o-animation: fadein 5s;
   /* Opera < 12.1 */
   animation: fadein 5s;
    z-index: 1;
   }


 /* Name Tag */

  .name-tag {
   font-family: 'avenir-light';
   text-align: center;
    font-size: 24px;
  }


 /* Social Media List*/

 .social-media-list {
   list-style: none;
    display: flex;
    justify-content: space-around;
     padding: 0;
    }


  /* Social Media Item*/

  .social-media-link img {
   height: 50px;
   width: 50px;
  transition:all 0.5s ease;
  }

 .social-media-link img:hover {
  -ms-transform: scale(1.2);
  /* IE 9 */
  -webkit-transform: scale(1.2);
   /* Safari */
   transform: scale(1.2);
  /* Standard syntax */
 }

Answer 1

您可以使用Bootstrap来实现此目的。 Bootstrap将屏幕分为12列。对于不同的屏幕尺寸，中等尺寸的不同类别可以使用col-md-3或小尺寸设备col-sm-3等。

调整html / css大小以适应不同的设备

1 个答案: