медиа-запросы в отзывчивом дизайне

Question

Я создаю отзывчивый веб-сайт. Для CSS для небольших мониторов я написал:

@media only screen and (min-width: 1224px) and (max-width: 1440px) { 
/*css here*/ 
} 

и HTML часть для CSS:

<link rel="stylesheet" type="text/css" media="screen (min-width: 1224px)" href="css/monitor.css" /> 

и когда я создаю CSS для смартфонов: HTML:

<link rel="stylesheet" type="text/css" media="(min-width: 320px)" href="css/mobile.css" /> 

css:

@media handheld and (min-device-width: 320px), 
handheld and (max-device-width: 767px) { 
/*css here*/ 
} 

1. «не видеть мою установку Css на смартфонах
2. на мониторе я вижу то, что я написал mobile.css

Что мне делать?

Answer 1

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

@media screen and (min-device-width: 320px), 
screen and (max-device-width: 767px) { 
/*css here*/ 
}