Добавление точек прерывания и управление диапазонами

Эта функция недоступна для объявлений AMPHTML.

Точки прерывания задают границы для изменения стиля в документе. Их можно добавлять двумя способами: непосредственно на линейках или в области просмотра. Во втором случае необходимо изменить стиль, а затем добавить новую точку с помощью панели "Адаптивные".

Диапазон – это промежуток между двумя точками прерывания. В Google Web Designer удобно контролировать горизонтальные и вертикальные диапазоны: они выделены разными цветами над линейками, а также показаны на панели "Адаптивные". Каждому прямоугольнику, в котором пересекаются диапазоны, соответствует отдельный стиль. Можно изменить форму диапазона, переопределив точки прерывания, или полностью удалить его. 

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

Responsive Layout: Advanced Techniques

Добавление точек прерывания

Чтобы добавить точку прерывания на линейку, выполните следующие действия:

  1. На панели "Адаптивные" выберите правила обработки мультимедиа (или правила вертикальной и горизонтальной ориентации для объявлений с двойной ориентацией).
  2. Нажмите правой кнопкой мыши на горизонтальную или вертикальную линейку, на которую необходимо добавить точку прерывания.
  3. Во всплывающем меню выберите Добавить точку прерывания.

Чтобы добавить точку прерывания через панель "Адаптивные", выполните следующие действия:

  1. На панели "Адаптивные" выберите правила обработки мультимедиа (или правила вертикальной и горизонтальной ориентации для объявлений с двойной ориентацией).
  2. Перетащите область просмотра в точку, в которой необходимо изменять стили.
  3. Нажмите кнопку Добавить точку прерывания в нижней части панели "Адаптивные".
  4. Во всплывающем меню выберите пункт Точка прерывания по ширине или Точка прерывания по высоте. Будет добавлена точка прерывания, соответствующая одной из границ области просмотра.

Перемещение точек прерывания

Как переместить точку прерывания

На панели "Адаптивные" выберите правила обработки мультимедиа (или правила вертикальной и горизонтальной ориентации для объявлений с двойной ориентацией), а затем выполните одно из следующих действий.

  • Перетащите точку прерывания по линейке.
  • Нажмите значение точки прерывания на вкладке "Правила обработки мультимедиа" панели "Адаптивные", а затем перетащите его вправо, чтобы увеличить, или влево, чтобы уменьшить.

Удаление диапазонов

Как удалить диапазон

На панели "Адаптивные" выберите правила обработки мультимедиа (или правила вертикальной и горизонтальной ориентации для объявлений с двойной ориентацией), а затем выполните одно из следующих действий.

  • Нажмите правой кнопкой мыши на диапазон, который необходимо удалить, и во всплывающем меню выберите пункт Удалить выбранные.
  • Выберите диапазон на вкладке "Правила обработки мультимедиа" панели "Адаптивные", а затем нажмите кнопку удаления в нижней части панели.

Создание переопределений стиля

Задавая точки прерывания, вы создаете отдельный стиль для каждой прямоугольной области, которую они определяют. Например, если задать одну точку прерывания по вертикали и одну по горизонтали, будет создано четыре стиля. Создав точки прерывания, можно выбрать для элемента любой стиль, в котором можно изменять все, что определяется с помощью CSS, включая анимацию.

Удаление переопределений стиля

Если изменить стиль в адаптивном режиме, будет переопределен стиль по умолчанию, который задан в главных правилах. Переопределение главного стиля сразу заметно, поскольку выделяется соответствующий ярлык свойств.

Как удалить переопределение

  1. На панели "Адаптивные" выберите правила обработки мультимедиа (или правила вертикальной и горизонтальной ориентации для объявлений с двойной ориентацией).
  2. Нажмите на ярлык свойств переопределения стиля, который необходимо удалить. Появится окно переопределения.
  3. Нажмите Удалить переопределение в нижней части окна.
Эта информация оказалась полезной?
Как можно улучшить эту статью?