Как боковой панели темы Wordpress twentyeleven удается сложить при определенном размере окон с помощью CSS?

Question

Это когда тема в полном размере:

Когда окно браузера становится меньше, боковая панель опускается вниз, аОсновное содержимое занимает весь макет:

Я думаю, что это CSS, который делает трюк:

}
#primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}
#content {
    border-top: 1px solid #444;
    margin: 0 34% 0 7.6%;
    padding: 20px 0 1.625em;
    width: 58.4%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

(не очень уверен).

Это демо темы.

Как боковой панели удается сложить при определенном размере окон с помощью CSS (позволяя основному контенту занимать все пространство)?

Answer 1

Это называется адаптивным дизайном. Проверьте это - coding.smashingmagazine.com / 2011/01/12 / руководящие принципы для отзывчивого веб-дизайна / .

А в приведенной выше теме WordPress есть файл style.css, который ссылается на https://s2.wp.com/wp-content/themes/pub/twentyeleven/style.css. В этом файле есть код, который заставляет боковую панель складываться при определенном размере окна.

@media (max-width:800px) {
  [...]
  #main #secondary {
    float:none;
    margin:0 7.6%;
    width:auto;
  }
  [...]
}

@ media (max-width: 800px) - это то, что заставляет боковую панель автоматически настраиваться ниже указанного размера экрана. Я надеюсь, что вы поняли.