Резиновый и адаптивный дизайн: какие различия в создании для дизайнера, сколько девайсов должно быть на выходе?

Question

[Алексей Гончаров]

Ребят, подскажите, в чем отличия? и сколько вариантов отдавать в итоге?

Answer 1

[crazyivan_ru]

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

В плане того "что отдавать в итоге" для адаптивного дизайна можете ориентироваться на 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) {
}

Answer 2

[Zhainar]

В минимальном варианте 2: для обычных экранов и для мобильных телефонов (mobile first от гугла).