CSS-запросы СМИ разные результаты

Почему DIV, отображающий разные на мобильном телефоне и измененный размер окна рабочего стола?CSS-запросы СМИ разные результаты

@media (max-width: 327px) { 
    .header {height: 0px !important;} 
} 
@media all and (min-width: 328px) and (max-width: 440px) { 
    .header {height: 0px !important;} 
}

Это то, что мне нужно ... если смотреть на рабочий стол изменении размеров окна это нормально, но на мобильном телефоне не

источник

2016-01-29 Volkan

Вы уверены 'высоте: 0px важно, опять'!? –

Какое разрешение телефона? Это может быть больше, чем '440px'. – Rhumborl

В обоих медиа-запросах правило одно и то же, и я сомневаюсь, что вы действительно хотите' height: 0px; 'вы должны использовать' @media (max-width: 327px) {'if оба правила одинаковы. – miguelmpn

Это может быть, что ваша ширина телефона более 327px, поэтому правило не активен в телефоне

Проверьте это:! https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

источник

2016-01-29 11:52:02 IAmJulianAcosta

Итак, ширина экрана телефона 360 пикселей ... Высота отображается ... но на рабочем столе это не (я изменил размер до 360 пикселей) – Volkan

Попробуйте заменить 'height: 0%' width ' граница: сплошной тонкий красный', чтобы проверить, не высока ли высота, или проблема с медиа-запросом – IAmJulianAcosta

Высота работает ... но она не показывает то же самое ... на мобильном телефоне отображается (лишнее уродливое пространство) рабочий стол это нормально ... действительно странно .. – Volkan

важно это очень плохо в CSS, использовать селекторы вместо.

Прочитайте это: https://css-tricks.com/when-using-important-is-the-right-choice/

Приходя к вашему вопросу

Изменить:

@media (max-width: 327px) { 
    .header {height: 0px !important;} 
} 
@media all and (min-width: 328px) and (max-width: 440px) { 
    .header {height: 0px !important;} 
}

To:

@media all and (max-width: 327px) { 
    .header {height: 0px !important;} 
} 
@media (min-width: 328px) and (max-width: 440px) { 
    .header {height: 0px !important;} 
}

источник

2016-01-29 11:52:22

Я знаю, спасибо, но мне пришлось переопределить исходный код .... – Volkan

Я обновил ответ –

спасибо за попытку .. все тот же .. – Volkan

пытаются этого

.header{height:200px; width:200px; background:red;} 
 
@media (max-width: 327px) { 
 
     .header {height: 0px;} 
 
    } 
 
    
 
    @media (max-width: 440px) { 
 
     .header {height: 0px;} 
 
    }

<div class="header"></div>

источник

2016-01-29 12:06:50

CSS-запросы СМИ разные результаты

ответ

Смежные вопросы