Пороговые значения для мобильной вёрстки

Опубликовано чт, 02/11/2016 - 10:56 пользователем admin

Имеется 3 мобильных шаблона PSD:

  • Mobile portrait (320px)
  • Mobile landscap (480px)
  • Tablet (768px)

 

И 1 десктопный шаблон PSD:

  • Desktop (1024px)

 

Брейкпойнты для CSS:

​<320px - Появляется скролл

@media screen and (max-device-width: 479px) {
  // (320px - Mobile portrait)
  // (479px - Mobile landscape)
}

@media screen and (max-device-width: 767px) {
  // (480px - Mobile landscape)
  // (767px - Tablet)
}

@media screen and (max-device-width: 1023px) {
   // (768px - Tablet)
   // (1023px - Tablet)
}

>=1024px - Десктоп версия

В промежуточных расширениях 321px-479px, 481px-767px и 781px-1023px используется резиновая вёрстка без появления горизонтального скролла.

Для тестирования мобильной вёрстки:

Теги: 
CSS