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

Question

[Игорь]

Сейчас же у всех мобилок(почти) разрешение экрана 720×1280 при 4.7 дюйма...
На что ориентироваться и как?
Спасибо!

Answer 1

[Денис Инешин]

Обычно должно быть 5-7 размеров
1. Смартфон в вертикальном положении (320-400)
2. Смартфон на боку (480 - 650)
3. Планшет в вертикально положении (768)
4. Планшет на боку (1024)
5. Десктоп (обычно 1200 и 1600).

Между этими размерами должна быть какая-то резина, чтобы переход был плавным и смотрелось нормально на нестандартных девайсах.

Comments

[Игорь]

а резину как делать?

[Игорь]

2.покажите сайт с такой резиной?

[Игорь]

3. на счет responsive что скажите?*

[Денис Инешин]

Игорь: Резина означает что не должно быть фиксированных размеров, и всё долно быть в процентах. Просто в неких ключевых точках контент перестраивается под новое рзрешение.

[Денис Инешин]

Игорь: https://meduza.io/ - responsive

Answer 2

[Алексей]

Ну я не стал бы рассчитывать на то что у ВСЕХ мобилок такое разрешение
Я делаю до ширины 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){	
}

Answer 3

[Александр Зачиналов]

не путайте физическое разрешение устройства с его логическим диапазоном, если экран имеет разрешение 1280px это не значит, что сайт будет отрисован именно в этом разрешении, вам нужно узнать что такое device pixel ratio, а также meta name=viewport. Сам использую запросы от 320px до 1200px, с промежуточными точками переходов в контексте задачи и эстетических соображений, отдельно пишу стили под iPhone 5-6s, в силу их экзотичности. Также следует помнить, что хороший адаптив это не только ширина, но и высота. Вот табличка по apple, в свое время очень помогла

Answer 4

[skyfortress]

Советую сайт верстать responsive, тогда вопрос с расширениями отпадет сам.

Comments

[Игорь]

пример сайтов на responsive сможете дать?
спсибо

[itsjustmypage]

Игорь: Просто задавай ширину контейнеров в относительных к вьюпорту величинах (проценты (чаще всего) / flexbox (набирает популярность) / vw, vmin (не всегда подходит) и изменяй структуру с помощью media-запросов и обычного поведения элементов (flexbox/inline-block/float) , когда каким-либо фиксированным по размерам элементам будет не хватать ширины (при уменьшении), либо свободной ширины будет слишком много (при увеличении экрана) .

Answer 5

[ummahusla]

Я делю на 3 части - декстоп, таблет, мобайл

Answer 6

[prokva]

минимум 3:
1. Смартфон в вертикальном положении 320
2. Планшет в вертикально положении (768)
3. Десктоп (обычно 1200 или 1600).

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