Проблема с медиа запросами в CSS

ZHMEN · 3 Июл 2017

Здравствуйте, многоуважаемые!
Есть необходимость масштабировать медиа запросами одну картинку (логотип) под каждый мобильный девайс: iPhone 5, 6, 6+, iPad's, а так же на больших экранах.
Соответственно нужно почти каждому указать стиль в виде width и т.д. для книжной и альбомной ориентации.
Из всего работает только для iPhone 5, 6 и большие экраны (=>1600px)
Для 6+ и iPad не срабатывает (проверяю в Хроме)

Подскажите, люди добрые, что не так у меня? Буду крайне премного благодарен!

Вот CSS-код:

Код:

@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
        width: 144px;
        transform: translateY(-7px);
}
}

@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
        width: 144px;
        transform: translateY(-7px);
}
}

@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
        width: 144px;
        transform: translateY(-8px);
}
}

@media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
        width: 100%;
        transform: translateY(-11px);
}
}

@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
        width: 144px;
        transform: translateY(-8px);
}
}

@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
        width: 144px;
        transform: translateY(-8px);
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { 
.logo-mobile {
         width: 144px;
        transform: translateY(-8px);
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.logo-mobile {
         width: 144px;
        transform: translateY(-8px);
}

@media only screen and (min-width: 1600px) {
.logo-mobile img {
        width: 100%;
}
}

diex · 3 Июл 2017

ZHMEN написал(а):
Здравствуйте, многоуважаемые!
Есть необходимость масштабировать медиа запросами одну картинку (логотип) под каждый мобильный девайс: iPhone 5, 6, 6+, iPad's, а так же на больших экранах.
Соответственно нужно почти каждому указать стиль в виде width и т.д. для книжной и альбомной ориентации.
Из всего работает только для iPhone 5, 6 и большие экраны (=>1600px)
Для 6+ и iPad не срабатывает (проверяю в Хроме)

Подскажите, люди добрые, что не так у меня? Буду крайне премного благодарен!

Вот CSS-код:

Код:

@media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){ .logo-mobile img { width: 144px; transform: translateY(-7px); } } @media only screen and (min-width: 320px) and (max-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){ .logo-mobile img { width: 144px; transform: translateY(-7px); } } @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){ .logo-mobile img { width: 144px; transform: translateY(-8px); } } @media only screen and (min-width: 375px) and (max-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){ .logo-mobile img { width: 100%; transform: translateY(-11px); } } @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){ .logo-mobile img { width: 144px; transform: translateY(-8px); } } @media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){ .logo-mobile img { width: 144px; transform: translateY(-8px); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .logo-mobile { width: 144px; transform: translateY(-8px); } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { .logo-mobile { width: 144px; transform: translateY(-8px); } @media only screen and (min-width: 1600px) { .logo-mobile img { width: 100%; } }

Ну вообще я например пишу так и все у меня работает:

Код:

@media screen and (min-width: 320px) and (max-width: 767px) {
	.class {
		width: 100%;
                color: #FFF;
	}
}

ZHMEN · 3 Июл 2017

Спасибо diex, но в моей ситуации, судя по всему так не выкрутишься, т.к. картинка на разных девайсах и ориентациях ведет себя по-разному.

C iPad'ом разобрался - не указал класс к какому я запрос применяю
Было .logo-mobile, надо .logo-mobile img.
Но для iPhone 6+ так и не применяется медиа запрос (

@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}

@media only screen and (min-width: 414px) and (max-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2){
.logo-mobile img {
width: 144px;
transform: translateY(-8px);
}
}

Didi · 3 Июл 2017

Решение у вас не очень понятное, хотелось бы на код посмотреть. Не разу не приходилось мне вот так на каждый девайс.
Обычно манипулируется <div> вокруг картинки а она сама всегда 100% от него. В некоторых случаях можно дополнительно использовать также max-width и min-width.

ZHMEN · 4 Июл 2017

Didi написал(а):
Решение у вас не очень понятное, хотелось бы на код посмотреть. Не разу не приходилось мне вот так на каждый девайс.
Обычно манипулируется <div> вокруг картинка а она сама всегда 100% от него. В некоторых случаях можно дополнительно использовать также max-width и min-width.

Вот сайт:
Для просмотра ссылки Войди или Зарегистрируйся

div'ом тут вряд ли обойдешься, т.к. под каждый девайс и ориентации приходится использовать разную ширину и позицию картинки, т.к. не совсем корректно отображается.

Didi · 4 Июл 2017

Посмотрел. Вообще непонятно: 736 и ниже берете лого уменьшаете на 150 и используете transform: translateY.
Когда сужаешь на мобилу опять лого обычной величины. 1) зачем это надо, всеравно с обычной величиной было бы ок. 2) transform: translateY?? там padding вокруг вот с ним и играйтесь, если уж на то пошло.
Кроме этого как только сужаешь меньше 1600, верхняя белая полоса становится уже и padding вогруг лого уже в воздухе.
Как по мне, у вас не медиа запросами проблема, а неправильный подход к css. Правильно сделанное будет одинаково работать на всех девайсах, так как не от них зависит.
Там бустрап все норм делает на стандартные вличины девайсов.

alex_me · 5 Июл 2017

ZHMEN написал(а):
Но для iPhone 6+ так и не применяется медиа запрос (

А зачем привязка к max-height и pixel-ratio?
Из-за -webkit-device-pixel-ratio наверно и не срабатывает
Лучше привязаться только к ширине и к orientation

ps. Для лого на сайте по ссылке, картинка должна выравниваться по высоте контейнера, например, так: display: inline-block; max-width: xxx; height: auto
Соответственно, медиа-запросы можно привязать опять же только к изменению ширины экрана и менять с помощью них только высоту контейнера топ-бара. Картинка будет выравниваться сама. И сам топ-бар само собой надо сверстать по-человечески )

pps. Точнее наборот, у картинки - display: inline-block; max-height: <физ. высота>; height: 100%; width: auto; У контейнера - фиксированная высота в зависимости от медиа-квири по ширине.
Лого будет выравниваться под контейнер

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

Проблема с медиа запросами в CSS

ZHMEN

Постоялец

diex

Постоялец

ZHMEN

Постоялец

Didi

Постоялец

ZHMEN

Постоялец

Didi

Постоялец

alex_me

Постоялец