Какие размеры дисплеев нужно учесть

[McLotos]

Пишу сейчас дизайн, хочу сразу подготовить всё для адаптивности, изучил все статьи из списка по теме, пока вот выбрал себе 4 как наиболее вероятные:

@media only screen and (max-width: 480px) {}@media only screen and (max-width: 768px) {}@media only screen and (max-width: 1024px) {}@media only screen and (min-width: 1025px) {}

Может подскажете какие нужно учесть обязательно?

Edited August 17, 2014 by McLotos

[afdw]

Постепенно уменьшайте ширину окна браузера, и если верстка начала вести себя неправильно, добавляйте текущую ширину в @media.

[McLotos]

Постепенно уменьшайте ширину окна браузера, и если верстка начала вести себя неправильно, добавляйте текущую ширину в @media.

совет конечно интересный, но суть вопроса в том чтобы учесть самые популярные размеры дисплеев (мониторы, ноутбуки, планшеты, телефоны)

[Нарек]

http://ru.screenresolution.org/

[McLotos]

 

1 1366x768 HD 22.75%

2 1920x1080 16:9 HD 1080 10.72%

3 1024x768 4:3 XVGA 9.24%

4 1280x1024 5:4 SXGA 8.29%

5 1440x900 8:5 WSXGA 6.31%

6 1280x800 8:5 WXGA 5.98%

7 1600x900 16:9 HD+ 900p 5.17%

8 1680x1050 8:5 WSXGA+ 3.28%

9 768x1024 2.81%

10 1360x768 2.30%

11 1024x600 WSVGA 1.66%

12 1920x1200 8:5 WUXGA 1.22%

13 320x568 1.21%

14 1280x720 16:9 HD 720 1.17%

15 320x480 2:3 HVGA 1.08%

КРУТО! СПАСИБО!

Edited August 17, 2014 by McLotos

[Sergik+]

Нифига не круто, Retina где ?

[Galaxy]

ага  и 4k

[npofopr]

А можно просто посмотреть, как делают в популярных фреймворках.

Хотя вам же свой велосипед нужен...

[Sergik+]

Так вроде давно есть соглашение по разрешениям, под все незачем просто.

[npofopr]

Так вроде давно есть соглашение по разрешениям

заказчикам чаще всего фиалетово. 

Китайских телефонов с "уникальным" разрешением тоже полно.

+ всё зависит от того, как верстать. Кто то делает px, кто то %. 

[Sergik+]

Я в смысле что если например от 320 до 480, 480 до 790, 790 до 1000, 1000 до 1980 (цифры могу путать чуть),

то есть под все разрешения не обязательно.

[npofopr]

Ну это само собой.

[McLotos]

Кто то делает px, кто то %. 

 

при чем здесь px или %?!

% используется для создания "резиновости" шаблонов, т.е. даёт шаблону возможность растягиваться под размеры дисплея

а адаптивность это когда меняется ПОВЕДЕНИЕ блоков шаблона (сменить расположение, убрать, переместить и т.д.)

Резиновость и Адаптивность это РАЗНЫЕ вещи.

Допустим есть шаблон в 3 колонки, если размер дисплея не позволяет адекватно показать контент (т.е. чтобы его можно было прочитать без лишних телодвижений), то боковые блоки можно либо убрать, либо расположить под основным, либо изменить так чтобы они не занимали место в ширину, а только в высоту, это и есть АДАПТИВНОСТЬ, а Резиновость это когда тебе пофиг помещается шаблон в экран или нет, ты просто берёшь и сжимаешь его по ширине, например делаешь ширину боковых блоков 10%, при ширине дисплея 480px боковые блоки будут по 48рх, много можно будет прочитать в таком блоке?

Edited August 17, 2014 by McLotos

[npofopr]

например делаешь ширину боковых блоков 10%

Те же 10% можно выставить в px. Всё зависит от дизайна и ТЗ или того, как вы захотите расположить эти блоки. 

[McLotos]

Вот я и спрашивал первоначально под какие размеры дисплея нужно писать =)

% будут использоваться только для растягивания элементов, а всё остальное будет делаться через @media only screen

[Sergik+]

Вот я и спрашивал первоначально под какие размеры дисплея нужно писать =)

% будут использоваться только для растягивания элементов, а всё остальное будет делаться через @media only screen

На хабре полно статей, гляньте там.

[klierik]

а чем не подошел вариант как сделано в bootstrap: http://getbootstrap.com/css/#grid ??