Как эти два сайта созданы, чтобы быть «отзывчивыми»? - PullRequest
2 голосов
/ 10 октября 2011

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

Мне очень нравится, как работают эти два сайта:

  1. http://paulrobertlloyd.com/
  2. http://colly.com/

Однако я не могу понять, как динамически меняются их макеты.Есть ли какая-то техника, которой мне не хватает, которая не указана ниже?

До сих пор я сталкивался со следующими методами:

1: Javascript

Пример - adapt.js

Динамически определяет разрешение экранаи выбирает соответствующую таблицу стилей.

2: CSS3 медиазапросы

Использование такой техники, как:

@media only screen and (max-width: 480px) and (min-width: 320px) {

}

3: Backend

Пример - Предварительное добавление файлов PHP

Действительно работает только для одной мобильной версии сайта, зеркально отражая исходный домен и изменяя заголовки.

Ответы [ 2 ]

4 голосов
/ 10 октября 2011

Оба этих сайта используют медиазапросы, как вы можете видеть в нижней части соответствующих им файлов CSS.

2 голосов
/ 10 октября 2011

Обычно это называется эластичным CSS.

Здесь есть основа для этого: http://elasticss.com/ Я должен сказать, что я никогда не использовал это лично, так что может быть что-то лучше.

...