Пытаясь понять медиа запрос

У меня есть следующие 3 медиазапросов установленных в моем CSSПытаясь понять медиа запрос

@media only screen and (min-device-width : 375px) and (max-device-width : 667px){ 
    #main-container{ 
     width: 375px; 
     height: 667px; 
    } 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 568px){ 
    #main-container{ 
     width: 320px; 
     height: 568px; 
    } 
} 


@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ 
    #main-container{ 
     width: 320px; 
     height: 480px; 
    } 
}

Когда я проверять мою страницу на соответствующий экране запрос последних средств массовой информации всегда переопределяет размеры. Я не уверен, почему это происходит, даже после того, как указать правильную максимальную и минимальную ширину для этого экрана

Первого запрос СМИ для Iphone 6, вторых для Iphone 5 и третьего для Iphone 4

источник

2015-10-01 RRP

В каком разрешении экрана вы проверяете это? Если вы проверяете rsolution на экране меньше, чем480px, тогда последний запрос на медиа будет отменен. –

Я использую режим переключения хром для устройства, кроме того, что я ничего не изменил – RRP

ok, тогда найдите ширину, если ширина меньше 480 пикселей, тогда будет применен последний медиа-запрос, поскольку он задает диапазон от 320 px до 480 пикселей. .. Вы также можете изменить reslution, введя свою пользовательскую высоту и ширину, а затем проверить, что произойдет .... Думайте, что вы являетесь следователем .. Удачи –

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

Так что вам нужно переосмыслить свою стратегию о том, как подойти к этому.

источник

2015-10-01 18:56:41 Rob

@media only screen и (min-device-width: 320px) и (max-device-width: 480px) { # main-container { width: 320px; высота: 480 пикселей; }}

Instead of min-device-width and max-device-width: 
    use can use:: min-width and max-width 

this should work

источник

2015-10-01 18:57:19

Я пробовал это, и он все равно перезаписывал – RRP

проверить скрипку его рабочего штрафа .. изменить размер и проверить цвет фона и ширину. http://jsfiddle.net/nanduh/z284joyw/ –

Почему у вас есть все эти медиазапросы ... Почему бы не использовать запрос 1 медиа для мобильных ...

Все ваши медиа-запросы подменяют друг друга, потому что определенные перекрытия ширина в ,

@media только экран и (ширина min-device-width: 320px) и (max-device-width: 767px) { # main-container { ширина: 100%; } }

источник

2015-10-01 20:02:30 Rob

Пытаясь понять медиа запрос

ответ

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