Responsive

Проблема мобильных браузеров

Responsive CSS

Размер экрана десктопа очевидно больше размера экрана мобильного устройства.

Можно изменять масштаб десктопного сайта, подгоняя к размеру мобильного экрана, но тогда текст будет нечитабельный.

Можно оставить текст читабельным, но использовать scroll для прокрутки текста, что также не очень удобно.

Существует два способа создать сайт под мобильный экран.

  1. создать CSS правила с ширинами блоков в % от ширины экрана устаревший способ "резиновая верстка"
  2. создать несколько CSS правил с фиксированной шириной (и прочее) под разные ширины экрана с помощью медиаправил
  3. совместить первый и второй способы: задать ширину блоков в % и использовать медиаправила для изменеия расположения и размеров блоков

Пример макета для различных устройств.

макет
back