Макет веб-сайта, который меняется с разной шириной?

Question

Кто-нибудь знает, как создать другой макет в зависимости от ширины браузера, как эти два сайта?

http://sasquatchfestival.com/

http://css -tricks.com /

Я пытался найти его в Google, просмотреть вопросы Stackoverflow и посмотреть их код, но я думаю, что что-то упустил.Он на самом деле переставляет и изменяет размеры некоторых элементов в зависимости от ширины окна, но как?Javascript?

Извините, если мои навыки поиска просто не работают, но я не совсем уверен, что искать, «похожие вопросы» здесь не кажутся связанными, и даже CSS-трюки не имеютинформация в легко найти место.

Answer 1

Вам не нужно использовать JS для определения ширины браузера. Вы можете просто использовать медиазапросы CSS для изменения макета.

Например:

@media screen and (max-width: 1280px) {
    ... selector(s) here ...
}

Будет применять CSS только к экранам шириной не более 1280 пикселей.

Смотри также:

• http://www.w3.org/TR/css3-mediaqueries/
• http://reference.sitepoint.com/css/mediaqueries

Answer 2

Вы можете изобрести колесо или просто построить / перестроить свой веб-сайт, используя одну из множества доступных адаптивных платформ.Я использовал как 'Skeleton', так и 'Bootstrap by Twitter'. Их фреймворки можно найти по адресу ...
Skeleton ... [http://www.getskeleton.com/][1] Bootstrap ... [http://twitter.github.com/bootstrap/][2]

Я создал сайты, используя каждый... Skeleton ... [http://72t.net][3] Bootstrap ... [http://ReactiveWebDesign.net][4]

Я все еще пытаюсь решить, что мне больше по вкусу, но сейчас кажется, что загрузочный ремень предлагает больше возможностей.

Answer 3

Вы можете использовать медиазапросы CSS3 для доставки различных стилей в зависимости от ширины экрана. Смотрите здесь для получения дополнительной информации: http://www.css3.info/preview/media-queries/

Если вы, например, посмотрите на источник CSS на сайте sasquatchfestival.com, вы увидите, что они делают: http://sasquatchfestival.com/css/screen.css?v=1328828795. Поищите "@media only screen", и вы увидите, что они " Мы предоставляем другой CSS для ширины ниже 768 пикселей, между 768-1024 пикселей и выше 1024 пикселей.

Answer 4

Может быть немного jMasonry , но это также немного похоже на то, что Twitter Bootstrap предоставляет в рельсах, возможно, стоило бы пролить их статическую версию CSS для ответы.