Основное различие в том, что резиновый дизайн растягивается/сжимается в зависимости от разрешения экрана на котором он отображается, а адаптивный дизайн - перестраивается - какие-то элементы могут пропадать/появляться, сдвигаться вниз/вверх и пр., соответственно для дизайнера это разные подходы к созданию макета, для верстальщика - разные подходы к верстке (использование определенных технологий/фреймворков и пр.).
В плане того "что отдавать в итоге" для адаптивного дизайна можете ориентироваться на Bootstrap - у них хорошая разбивка по устройствам:
Mobile-First подход:
/* Custom, iPhone */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
Non-Mobile-First подход:
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone */
@media only screen and (max-width : 320px) {
}
