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

    @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) {
    }
    Ответ написан
    Комментировать
  • Резиновый и адаптивный дизайн: какие различия в создании для дизайнера, сколько девайсов должно быть на выходе?

    @zhainar
    Гуглю за вас
    В минимальном варианте 2: для обычных экранов и для мобильных телефонов (mobile first от гугла).
    Ответ написан
    Комментировать