IgorBee
@IgorBee
JS,VBS,3D.Web с 07.2015

Под какие (разрешения) экраны делать адаптивку сайта?

DsAXNlC.png
Сейчас же у всех мобилок(почти) разрешение экрана 720×1280 при 4.7 дюйма...
На что ориентироваться и как?
Спасибо!
  • Вопрос задан
  • 10633 просмотра
Пригласить эксперта
Ответы на вопрос 6
IonDen
@IonDen
JavaScript developer. IonDen.com
Обычно должно быть 5-7 размеров
1. Смартфон в вертикальном положении (320-400)
2. Смартфон на боку (480 - 650)
3. Планшет в вертикально положении (768)
4. Планшет на боку (1024)
5. Десктоп (обычно 1200 и 1600).

Между этими размерами должна быть какая-то резина, чтобы переход был плавным и смотрелось нормально на нестандартных девайсах.
Ответ написан
alex-saratov
@alex-saratov
Ну я не стал бы рассчитывать на то что у ВСЕХ мобилок такое разрешение
Я делаю до ширины 288 px
Тестирую 10 - 15 режимах, для каждого делаю свой media screen с коррекцией отображения для отдельных элементов. если рассчитывать на популярные, то отсечете часть пользователей.
@media only screen and (max-width: 990px){	
}
@media only screen and (max-width: 850px){	
}
@media only screen and (max-width: 767px){	
}
@media only screen and (max-width: 566px){	
}
@media only screen and (max-width: 489px){	
}
@media only screen and (max-width: 379px){	
}
@media only screen and (max-width: 339px){	
}
@media only screen and (max-width: 299px){	
}
Ответ написан
Комментировать
не путайте физическое разрешение устройства с его логическим диапазоном, если экран имеет разрешение 1280px это не значит, что сайт будет отрисован именно в этом разрешении, вам нужно узнать что такое device pixel ratio, а также meta name=viewport. Сам использую запросы от 320px до 1200px, с промежуточными точками переходов в контексте задачи и эстетических соображений, отдельно пишу стили под iPhone 5-6s, в силу их экзотичности. Также следует помнить, что хороший адаптив это не только ширина, но и высота. Вот табличка по apple, в свое время очень помогла
Ответ написан
Комментировать
@skyfortress
Советую сайт верстать responsive, тогда вопрос с расширениями отпадет сам.
Ответ написан
Antonoff
@Antonoff
Разработчик
Я делю на 3 части - декстоп, таблет, мобайл
Ответ написан
Комментировать
@prokva
минимум 3:
1. Смартфон в вертикальном положении 320
2. Планшет в вертикально положении (768)
3. Десктоп (обычно 1200 или 1600).

Если все по нормальным сеткам, то везде будет красиво)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы