2011-12-16 3 views
1

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

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

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

+0

У вас есть поиск в Google для «отзывчивого дизайна», который должен вас завести ... – ptriek

+0

Прохладный сайт .. отличный вопрос .. Сначала я подумал, что это просто jQuery .., но CSS довольно напуган, а материал @media в ответы - это то, что я никогда не изучал .. – ppumkin

ответ

1

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

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

+0

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

+0

@Giles Wilkinson Ofcourse есть некоторые навыки, связанные с этим - вот почему вы платите/платите за кодирование ... – easwee

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

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

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

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

+0

Будет ли этот масштаб в режиме реального времени или зависит от отображения страницы? –

+0

@ Giles Wilkinson - он будет масштабироваться в режиме реального времени - каждый раз, когда вы изменяете размер браузера, он делает чек. – easwee