<div>
   Можливості медіа-запитів не обмежуються виявленням мобільних пристроїв, з їх допомогою можна створювати адаптивний макет. Такий макет підлаштовується під дозвіл монітора і вікна браузера, змінюючи при необхідності ширину макета, число колонок, розміри зображень і тексту. Медіа-запити обмежують ширину макета і при досягненні цього значення (наприклад за рахунок зменшення вікна або при перегляді на пристрої з вказаним розміром) вже застосовується інший стиль.
</div>

body{
  font-size: 19px;
}
div {
    padding: 10px;
    background: #e8bfad;
    margin: auto;
    padding: 30px;
   }
@media screen and (min-device-width: 1600px) {
    div {width: 1500px;}
   }
@media screen and (device-width: 1280px) {
    div {width: 1100px;}
   }
@media screen and (device-width: 1024px) {
    div {width: 980px;}
   }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.