Самый быстрый способ сделать сайт отзывчивым?

Я использовал Zurb Foundation и Skeleton, прежде чем я знаком с обоими, но мне никогда не приходилось переводить существующий веб-сайт на отзывчивый веб-сайт раньше. Какой самый быстрый способ конвертировать мой сайт? Использование фреймворка, как указано выше, или добавление медиа-запросов для уже предоставленного кода? (Это даже работает?)

Ответ 1

Определите, какие устройства вы хотите поддерживать, а затем добавьте таблицу стилей с помощью следующих строк:

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
       /* Smaller Resolution Desktops and Laptops */
       [...]
}
@media (max-width: 650px) {
       /* Smaller devices */
       [...]
}
@media (max-width: 450px) {
       /* Even Smaller devices */
       [...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       /* Even Smaller devices */
       [...]
}

Проще всего проверить, идут ли они в порядке убывания. больше примеров медиа-запросов здесь:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Ответ 2

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

Я не знаком с Скелетом, но Twitter Boostrap отлично работает для меня.

Ответ 3

Если вы готовы немного поработать и переделать мозг, там можно установить фундамент в существующем в настоящее время проекте (в частности, в проектах компаса).

Сначала вам нужно установить компас и превратить проект в проект компаса. Легкий способ сделать это через набор кода и просто перетащить папку проекта в комплект кода. Вы можете получить некоторые подсказки терминала через эту страницу на веб-сайте фонда.

http://foundation.zurb.com/docs/sass.html

Затем вам нужно будет открыть терминал и введите

cd /path-to-your-project-folder/

тогда введите

compass install -r zurb-foundation foundation

Вы можете попробовать и использовать фундамент самостоятельно в существующем приложении, используя полностью sass (без компаса), но вам нужно будет загрузить основу с сайта git и @include scss по одному. Вы можете найти информацию на странице, указанной выше.