Запросы на информацию о средствах массовой информации

Question

Возможно, это вопрос новичков, но я немного смущен медиа-запросами.

У меня есть связь 5, которая составляет 1920x1080, и я пытаюсь изменить фон тела в зависимости от ширины.

Это код

body { 
    background: black; 
} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) { 
body { 
    background: red; 
} 
} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { 
body{ 
    background: yellow; 
} 
} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
    body{ 
     background: green; 
    } 
} 

Открытие этого проекта на моем Nexus 5 фон красный, а не желтый, почему? Что мне не хватает? Я загрузил его здесь http://untruste.altervista.org/Try.html

Answer 1

его потому 1920x1080 пикселей не реальное разрешение вашего устройства, но оказывается разрешение, реальное разрешение для мобильных устройств составляет около 360x480 , поэтому ваш экран становится черным после добавления мета с видовым экраном. Возможно, ваш браузер показал вашу страницу в разрешении между 768 и 992px. Существует много вещей, которые можно сказать о и вот статья о нем:

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

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

Answer 2

Пожалуйста, добавьте максимальную ширину с запросами средств массовой информации, как

/*Small devices (tablets, 768px and up)*/ 

@media (min-width: 768px)and 
(max-width:991px) { 
body { 
background: red; 
} 
} 

/*Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) and (max-width:1191px) { 
body{ 
background: yellow; 
} 
} 

/*Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { 
    body{ 
    background: green; 
} 
}