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

我创建了一个网站，并且在iPad或iPhone上查看它时（例如），它不会调整大小以适合屏幕。它将我的文本框（名称和社交媒体按钮）放在左边，背景图片放在右边（这两个元素之间有空白）。我希望网站在纵向和横向以及桌面浏览器中浏览时使用（使用浏览器窗口调整大小）调整html/css大小以适应不同的设备

如何将此代码应用到我的代码中？

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 */ 
}

来源

2017-03-29 ConfusedDreamweaverUser

按照这个问题http://stackoverflow.com/questions/16959848/how-to-implement-responsive-web-design-and-its-best-practices –

@SahilDhir我看了一眼，似乎没有什么正在工作。 – ConfusedDreamweaverUser