MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Режим адаптивного дизайна

Адаптивные дизайны (Responsive designs)  адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт легкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.

Скриншот ниже показывает страницу мобильной версии Википедии, отображаемой при размере области контента 320 на 480.

Окно Firefox, в области содержимого которого показывается короткая панель инструментов и маленькая область содержимого, в которой показана статья «мобильной» Википедии «Вода» соответственно размеру маленькой области.Режим адаптивного дизайна удобен тем, что можно быстро и точно изменять размер области содержимого.

Конечно, можно просто изменить размер окна браузера: но этим вы уменьшите и все остальные вкладки, что может очень затруднить использование браузера.

В режиме адаптивного дизайна можно ходить по страницам в изменённой области содержимого как и обычно.

Включение и выключение

Есть три способа включения режима адаптивного дизайна:

и три способа выключить режим адаптивного дизайна:

  • снова выбрать пункт меню «Режим адаптивного дизайна» или «Адаптивный дизайн»;
  • кликнуть кнопку «Выйти» («закрыть») в верхнем левом углу окна режима;
  • Нажать Ctrl + Shift + M, (or Cmd + Opt + M on OS X). До Firefox 34, Escape тоже закрывала Режим адаптивного дизайна.

Изменение размера

Изменить размер области содержимого можно двумя способами:

При использовании перетаскивания можно удерживать клавишу Control (command на Max OS X), чтобы изменение шло медленнее. Это помогает установить размер точнее.

Элементы управления режимом

Выйти Закрыть Режим адаптивного дизайна и вернуться к нормальному просмотру
Выбрать размер

Выбрать из ряда комбинаций ширины и высоты, или определить свои собственные.

Начиная с Firefox 33, показываемые здесь числа можно редактировать на месте, так что можно легко определять собственные измерения.

Повернуть Переключить экран между книжной и альбомной ориентацией.

Симулировать события прикосновения

Включить / выключить симуляцию сенсорных событий: когда она включена, события мыши переводятся в touch events.

Скриншот

Сделать скриншот (снимок) области содержимого.

 

Метки документа и участники

 Внесли вклад в эту страницу: Aleksej, teoli, Tihoem, lobanok1973
 Обновлялась последний раз: Aleksej,