Используете ли вы данную заготовку при адаптивной верстке?

Question

[svilkov87]

Добрый день!
Много раз встречал такой код, которые вроде бы должен использоваться при верстке адаптивного дизайна. Источник

/* Smartphones (вертикальная и горизонтальная ориентация) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* стили */
}

/* Smartphones (горизонтальная) ----------- */
@media only screen and (min-width: 321px) {
/* стили */
}

/* Smartphones (вертикальная) ----------- */
@media only screen and (max-width: 320px) {
/* стили */
}

/* iPads (вертикальная и горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* стили */
}

/* iPads (горизонтальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* стили */
}

/* iPads (вертикальная) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
/* стили */
}

/* iPad 3**********/
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* Настольные компьютеры и ноутбуки ----------- */
@media only screen  and (min-width: 1224px) {
/* стили */
}

/* Большие экраны ----------- */
@media only screen  and (min-width: 1824px) {
/* стили */
}

/* iPhone 4 ----------- */
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
/* стили */
}

/* iPhone 5 ----------- */
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6 ----------- */
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* iPhone 6+ ----------- */
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
/* стили */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 320px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3){
/* стили */
}
@media only screen and (min-width: 360px) and (max-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3){
/* стили */
}

Вопросы по этому коду следующие:
1. что означает and (-webkit-device-pixel-ratio: 3)? и Принципиально ли это?
2. действительно ли нужно прописывать медиа-запросы под каждый бренд - Galaxy S5, S4, S3, iPhone 6, 5 итд? Если использую Sass, то создавать под это все отдельные миксины?

Спасибо.

Answer 1

[Павел]

использовать стоит но не все что тут напихано однозначно. Делать надо под распространенные разрешения , если надо чтоб сайт на мобилках в ландскейпе смотрелся как то по особому то можно и его в правилах прописывать. Для всех телефонов в основном достаточно от 320px делать и все

Answer 2

[Ankhena]

Все зависит от дизайна.

При простом дизайне и функциональности может хватить, например, двух или трех точек: 320 768 980.
При сложном их могут оказаться десятки.

Есть разная тактика что делать между точками. Можно делать фиксированную ширину и оставлять поля. Можно делать всегда 100% ширину экрана. Второй вариант сложнее, а значит условий может понадобится больше.

Писать всю ту простыню просто так, лишь бы написать, смысла никакого нет.

Answer 3

[Максим Софронов]

1. device-pixel-ratio — плотность пикселей. Если вкратце, то использовать это можно лишь при необходимости. В основном пригождается для картинок, чтобы они выглядели четкими.

2. Посмотрите как реализованы контрольные точки в Бутстрапе, в большинстве случаев их достаточно. Т. е. реализуется не под бренд, а просто под ширину экрана.

Answer 4

[Islam Ibakaev]

1. гугл в помощь
2. по дефолту - не нужно