Адаптивная верстка с использованием медиа-запросов

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Адаптивная верстка с использованием медиа-запросов</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
   
     <div id="mainWrapper">
      <div id="headerContainer">
       <div>Мелкий текст заголовка</div>
       <h3>Адаптивная</h3>
       <hr>
      </div>
      <div id="previewsContainer">
       <div><img src="01.png"></div>
       <div><img src="02.png"></div>
       <div><img src="03.png"></div>
       <div><img src="04.png"></div>
       <div><img src="05.png"></div>
       <div><img src="06.png"></div>
       <div><img src="07.png"></div>
       <div><img src="08.png"></div>
      </div>
      <div id="footerContainer">
       <hr>
       <div>&copy; Василий Пупкин</div>
      </div>
     </div>
   
    </body>
   
   </html>

   html, body									{ width: 100%; margin: 0; padding: 0; font-family: Arial, Tahoma, Verdana; text-align: center; }
   
   div										{ box-sizing: border-box; overflow: hidden; }
   
   
   @media screen and (min-width: 500px)
   {
    #mainWrapper								{ width: 100%; padding: 20px; }
    #headerContainer		div						{ margin-top: 20px; font-size: 11px; }
    #headerContainer		h3						{ margin: 0; font-size: 30px; }
    #headerContainer		hr						{ height: 1px; margin: 10px 0px 10px 0px; border: 0; background-color: #d0d0d0; }
    #previewsContainer		div						{ float: left; width: 48%; margin: 20px 2% 0px 2%; }
    #previewsContainer		div				img		{ display: block; width: 100%; }
    #previewsContainer		div:nth-of-type(2n+1)				{ margin-left: 0px; }
    #previewsContainer		div:nth-of-type(2n+2)				{ margin-right: 0px; }
    #footerContainer		hr						{ height: 1px; margin: 30px 0px 10px 0px; border: 0; background-color: #d0d0d0; }
    #footerContainer		div						{ font-size: 11px; }
   }
   
   
   @media screen and (min-width: 550px)
   {
    #headerContainer		h3						{ font-size: 32px; }
    #headerContainer		hr						{ margin: 10px 0px 6px 0px; }
    #previewsContainer		div						{ margin: 24px 2% 0px 2%; }
   }
   
   
   @media screen and (min-width: 600px)
   {
    #mainWrapper								{ padding: 26px; }
    #headerContainer		h3						{ font-size: 36px; }
    #previewsContainer		div						{ margin: 26px 2% 0px 2%; }
   }
   
   
   @media screen and (min-width: 700px)
   {
    #mainWrapper								{ padding: 30px; }
    #headerContainer		div						{ font-size: 12px; }
    #headerContainer		h3						{ font-size: 40px; }
    #headerContainer		hr						{ margin: 10px 0px 13px 0px; }
    #previewsContainer		div						{ width: 32%; margin: 15px 1% 0px 1%; }
    #previewsContainer		div:nth-of-type(2n+1)				{ margin-left: 1%; }
    #previewsContainer		div:nth-of-type(2n+2)				{ margin-right: 1%; }
    #previewsContainer		div:nth-of-type(3n+1)				{ margin-left: 0px; }
    #previewsContainer		div:nth-of-type(3n+3)				{ margin-right: 0px; }
    #footerContainer		div						{ font-size: 12px; }
   }
   
   
   @media screen and (min-width: 800px)
   {
    #headerContainer		hr						{ margin: 10px 0px 9px 0px; }
    #previewsContainer		div						{ margin: 17px 1% 0px 1%; }
   }
   
   
   @media screen and (min-width: 800px)
   {
    #previewsContainer		div						{ margin: 20px 1% 0px 1%; }
   }
   
   
   @media screen and (min-width: 960px)
   {
    #mainWrapper								{ width: 920px; padding: 0px; margin: auto; }
    #previewsContainer		div						{ width: 23.5%; }
    #previewsContainer		div:nth-of-type(3n+1)				{ margin-left: 1%; }
    #previewsContainer		div:nth-of-type(3n+3)				{ margin-right: 1%; }
    #previewsContainer		div:nth-of-type(4n+1)				{ margin-left: 0px; }
    #previewsContainer		div:nth-of-type(4n+4)				{ margin-right: 0px; }
   }

Адаптивная верстка с использованием медиа-запросов

Задание:

html-документ (index.html):

CSS–разметка (styles.css):

Результат: