Автоподбор контента?

Question

Я хочу знать, как http://staffanstorp.se/ обладает способностью передавать контент (я считаю, что это термин, пожалуйста, поправьте меня, если я ошибаюсь). Я также изменю теги в соответствии с тем, чтобы другие могли найти этот пост, когда у людей есть ответы, потому что мне было трудно что-либо найти.

Во всяком случае, я планировал в Интернете найти возможный плагин jquery, который сделает это для меня. Сайт выше именно то, что мне нужно, и я очень благодарен за помощь: D

Единственное, что мне удалось найти, - это автоматическое изменение размера контента, но только для текста, этот сайт делает многое!

Answer 1

Это делается с помощью медиа-запросов в файле CSS.например,

@media screen and (max-width: 1024px){
img {
    width: 400px;
    height: 400px;
    margin-left: -512px; }
}

@media screen and (max-width: 512px){
img {
    width: 200px;
    height: 200px;
    margin-left: -512px; }
}

Этот CSS предоставляет правила для всех изображений, ограничивающие их размер до 400 пикселей при ширине экрана 1024 пикселя или менее и ограничивающие их до 200 пикселей при ширине экрана 512 пикселей или менее.

Создавая отдельные правила, которые работают для разных размеров экрана, вы можете обеспечить этот вид динамического макета.

Второй способ - не определять что-либо в фиксированных терминах.Использование% widths и т. Д. Позволит вашей странице соответствовать любому размеру, а затем вы можете использовать вышеупомянутые медиазапросы для перемещения контента, когда экран становится слишком маленьким.

Надеюсь, это поможет.

Answer 2

Это делается с помощью медиазапросов в сочетании с жидкостным макетом CSS .

В противном случае установите firebug и начните анализировать код - все это есть на сайте.