Урок 15. Чтобы было красиво и на телефоне

Экран телефона в три-четыре раза уже монитора. Страница, отлично выглядящая на компьютере, на телефоне часто уезжает вбок, и её приходится двигать пальцем. Это раздражает и людей, и поисковики.

Шаг первый — строка в head

Без неё телефон притворяется широким монитором и уменьшает всю страницу так, что текст не прочитать:

<meta name="viewport" content="width=device-width, initial-scale=1">

Шаг второй — медиазапрос

Это способ сказать: «а вот если экран узкий, применяй другие правила».

@media (max-width: 600px) {
  h1 {
    font-size: 26px;
  }
  .ryad {
    flex-direction: column;
  }
}

max-width: 600px читается как «пока ширина экрана не больше 600 пикселей». Правила внутри фигурных скобок работают только на узких экранах, а на широких браузер их игнорирует.

Шаг третий — не задавать жёсткую ширину

• вместо width: 800px писать max-width: 800px — «не шире 800, но можно уже»;
• картинкам задавать max-width: 100%, чтобы они не вылезали за экран;
• у flex-рядов не забывать flex-wrap: wrap.

Частые вопросы