Автофильтр?

Question

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

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

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

Answer 1

Это делается с использованием media queries в сочетании с liquid css layout.

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

Answer 2

Это делается с использованием медиа-запросов в файле 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 содержит правила для всех изображений, чтобы ограничить их размер 400px, когда экран 1024px или менее широким и ограничивая их 200px, когда экран или менее 512 пикселей в ширину.

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

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

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