2012-03-29 4 views
16

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

+2

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

+12

@ jfriend00, термин «отзывчивый», в веб-дизайне (и, в частности, «отзывчивый дизайн» для тегов вопроса) относится к веб-сайтам, которые динамически корректируют свой макет, используя запросы CSS-мультимедиа, для любого размера экрана, на котором они находятся. –

ответ

29

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

/* =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/

+0

спасибо! Так что сделать это, как это было бы самым простым способом сделать сайт отзывчивым –

+0

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

+1

Ты сделал это Джо? Каковы были ваши результаты? Я собираюсь сделать то же самое на веб-сайте клиента, и я пытаюсь решить, рекомендовать ли они перестроить свой CSS с нуля (это довольно большой проект) или сделать это таким образом. – vrutberg

3

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

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

0

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

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

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

Вы бы после этого нужно открыть терминал и введите

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

введите

compass install -r zurb-foundation foundation 

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

Смежные вопросы