Когда размер страницы изменяется, как она красиво и упорядоченно перемещается?

Question

Например, www.breakingnews.com использует Twitter Bootstrap, который отлично справляется с таким перепозиционированием. Когда размер окна браузера изменяется по горизонтали, страница корректируется соответствующим образом. Размеры столбцов уменьшаются, столбцы и заголовки исчезают, значки и кнопки сдвигаются в сторону, а текст выравнивается. Как это работает?

Answer 1

Этот метод обычно называется " Адаптивный дизайн ", это одновременно (довольно простая) техническая реализация и способ проектирования для экранов с переменным размером. Связанная книга представляет собой краткое и простое описание, или читайте об этом почти везде.

Answer 2

Есть много способов сделать это.Они используют CSS3 и @meda screen и (max-wdith: x) для установки значений.

Итак, у них есть такой код:

@media screen and (max-width: 1024px) {
  #identity { 
    margin-left:6.15%;
  }
}

Внутри файла all.css.

Answer 3

В данном конкретном случае используются медиа-запросы CSS.Это позволяет использовать разные таблицы стилей в зависимости от ширины устройства.Это означает, что у них есть маленькая, средняя и большая таблица стилей, которая показывает различные столбцы в зависимости от ширины. В этом руководстве рассматриваются медиазапросы.

Кроме того, ширина элементов должна быть указана в%.Это называется текучим макетом.Это делает их соответствующими текущему размеру браузера.Компоновка с фиксированной шириной имеет одинаковую ширину независимо от размера браузера и поэтому просто обрезает содержимое при изменении размера браузера.