Адаптивный дизайн

[kolhoz]

Добрый день. Подскажите пожалуйста такую вещь. Сделал сайт http://intechsoft.ru/about/news/верстка адаптивная. В css использовал медазапрос @media screen and (max-width: 991px) чтобы для экранов с разрешением <991px сайт немного по-другому отображался. Сказали что на Ipad air 5 (2048х1536px) вроде разрешение сайт криво отображается. Как мне сделать полноценную адаптивность? Какие медиазапросы лучше использовать? Вообще как лучше писать:

 

@media screen and (max-width: 991px)

 

@media screen and (min-device-width: 991px)

 

что из этих будет правильнее?

[Great Rash]

1) для начала прочитайте вот эту статью

2) затем изучите самые распространённые медиа-запросы

[kolhoz]

Статьи хорошие. Но правильно ли будет с точки зрения адаптивности, если я для экранов с шириной < 991 px укажу одни стили, для экранов с шириной >=991px но <1536 px укажу одни стили. А для экранов >1536 укажу другие? Мне нужно чтобы для Ipad air 5 сайт корректно отображался. у него разрешение 2048х1536

[Great Rash]

Вы походу так и не прочитали первую статью... а зря, ибо там написано, что у любого мобильного устройства есть два типа измерений.

 

1) просто ширина в пикселях (width), в вашем случае это реально 2048.

2) ширина устройства (device-width), реальная ширина iPad равна 1024, т.е. в два раза меньше чем вы думаете.

 

Чтобы не писать миллион медиа-запросов, верстальщики во всём мире полагаются не на max-width, а на max-device-width. Так что корректный запрос для вас выглядит так:

 

@media only screen and (max-device-width: 991px) {  /* бла-бла-бла */}

[kolhoz]

понял. почитаю обе статьи хорошенько

[kolhoz]

Как я понял нужно при адаптивной верстке учитывать размеры устройств, а не разрешения? Так?

[Great Rash]

Есть такие понятия как разрешение экрана и плотность пикселей. Разрешение экрана у iPad 1024х768, но плотность пикселей удвоена, т.е. в одном обычном пикселе помещается 4 "ретинных", вот и получается, что маркетологи пишут в спецификациях 2048х1536, что равно (1024 * 2)х(768 * 2). У разных устройств (от разных производителей) плотность пикселей может быть разной: например у iPhone 6 Plus плотность пикселей равна 3, а у Nexus S - 1.5. Именно поэтому нужно полагаться именно на device-width и device-height, когда проектируете адаптивный сайт.