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

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

введите здесь описание изображения

введите здесь описание изображения

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

введите здесь описание изображения

Я думаю, что это 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 (позволяя основному содержимому занимать все пространство)?


wordpress css responsive-design
person alexchenco    schedule 03.09.2011    source источник
comment
поскольку это гибкая тема, вы можете узнать больше здесь, как это работает w3.org/TR/css3 -медиазапросы   -  person Side    schedule 03.09.2011
comment
@Side Я знаю, что это гибкий макет, и он не использует смартфоны с мультимедийными запросами. Я хочу знать, как.   -  person alexchenco    schedule 03.09.2011

Ответы (1)


arrow_upward
0
arrow_downward

Это называется адаптивным дизайном. Проверьте это - 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) — это то, что автоматически настраивает боковую панель ниже указанного размера экрана. Надеюсь, ты понял.

person CrazyFellow    schedule 22.03.2013