Опубликовано Webmaster - сб, 05/16/2015 - 00:43

Учитывая большое количество разрешений, идеальным решением данных проблемы была бы реализация проекта «One Web». One Web означает создание, насколько это возможно, одинаковых условий для использования и отображения информации на всех устройствах. Но это не означает, что одна и та же информация будет выглядеть абсолютно одинаково на разных устройствах.

Разрешения экранов мобильных устройств

  • 320×480 — iPhone, iPod
  • 480×800 — Android: HTC Desire, Nexus One, i9000 Galaxy S, и другие
  • 768×1024 — iPad
  • 640×960 — iPhone 4
  • 1000×бесконечность — планшеты и десктоп

Определить ширину экрана, положение и соотношение сторон можно с помощью media-запросов, которые появились в CSS3.

/* Устройства с экранами от 320px до 480px */
@media (min-width:320px) and (max-width:479px) {
.grid {width:100%;}
}
/* Устройства с шириной экрана 480px и выше */
@media (min-width:480px) and (max-width:639px) {
.grid {width: 50%;}
}
/* Устройства с шириной экрана 640px и выше */
@media (min-width:640px) and (max-width:959px) {
.grid {width: 33.33%;}
}
/* Устройства с шириной экрана 960px и выше */
@media screen and (min-width:960px) and (max-width:1199px) {
.grid {width: 25%;}
}
/* Устройства с шириной экрана 1200px и выше */
@media (min-width: 1200px) {
.grid {width: 20%;}
}