Адаптивные дизайны (Responsive designs) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт легкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.
Скриншот ниже показывает страницу мобильной версии Википедии, отображаемой при размере области контента 320 на 480.
Режим адаптивного дизайна удобен тем, что можно быстро и точно изменять размер области содержимого.
Конечно, можно просто изменить размер окна браузера: но этим вы уменьшите и все остальные вкладки, что может очень затруднить использование браузера.
В режиме адаптивного дизайна можно ходить по страницам в изменённой области содержимого как и обычно.
Включение и выключение
Есть три способа включения режима адаптивного дизайна:
- Выбрать «Адаптивный дизайн» в подменю «Веб-разработка» в меню Firefox (или в меню Инструменты, если включить панель меню или на Mac OS X)
- Нажать кнопку «Режим адаптивного дизайна» на панели инструментов набора инструментов веб-разработчика.
- Нажать Ctrl + Shift + M, (или Cmd + Opt + M на OS X)
и три способа выключить режим адаптивного дизайна:
- снова выбрать пункт меню «Режим адаптивного дизайна» или «Адаптивный дизайн»;
- кликнуть кнопку «Выйти» («закрыть») в верхнем левом углу окна режима;
- Нажать Ctrl + Shift + M, (or Cmd + Opt + M on OS X). До Firefox 34, Escape тоже закрывала Режим адаптивного дизайна.
Изменение размера
Изменить размер области содержимого можно двумя способами:
- используя элемент управления «Выбрать размер»;
- щёлкнуть и перескивать элементы управления на правой и/или нижней стороне области, или в правом нижнем углу.
При использовании перетаскивания можно удерживать клавишу Control (command на Max OS X), чтобы изменение шло медленнее. Это помогает установить размер точнее.
