📱 CSS Media Queries

Media queries меняют стили под размер экрана


@media (max-width:600px){
  body{background:red;}
}

📘 Как пройти CSS тренажёр

В этой игре ты учишься писать Media Queries — специальные правила CSS, которые делают сайт адаптивным.

Media Query позволяет менять стили в зависимости от размера экрана. Например — если экран меньше 600px.


@media (max-width:600px){
  body{
    background:red;
  }
}

👉 Это значит: если ширина экрана ≤ 600px — фон станет красным.


@media (max-width:768px){
  .preview{
    width:100%;
  }
}

📌 Это сделает блок шириной 100% на маленьких экранах.

🚀 Теперь ты готов(а) пройти тренажёр!

Ниже ты можешь увидеть, как Media Query меняет кубик:

Кубик


@media (max-width:600px){
  .preview{
    background:red;
  }
}


@media (max-width:600px){
  .preview{
    width:100%;
  }
}