Если сайт уже сверстан, то фреймворк вам вряд ли поможет, адаптивность нужно будет делать при помощи media-запросов. Запросы должны идти в порядке убывания. Могу предложить такой вариант:
@media screen and (max-width: 1024px) {
/* Стили для разрешения 1024px и ниже */
}
@media screen and (max-width: 768px) {
/* Стили для разрешения 768px и ниже */
}
@media screen and (max-width: 600px) {
/* Стили для разрешения 600px и ниже */
}
@media screen and (max-width: 480px) {
/* Стили для разрешения 480px и ниже */
}
Верстка под данные разрешения покроет львиную долю мобильных устройств. При разрешении 1024px и ниже делаете сайт резиновым. Округляйте полученные значения при подсчете ширины, чтобы было удобно. И не забывайте, что в общую ширину входят еще внешние и внутренние отступы, либо используйте правило box-sizing: border-box. Если внимательно следить за шириной, то ничего разваливаться не будет.
Простой
