media queries in responsive design

Question

I'm creating a responsive website. For the CSS for smaller monitors I wrote this:

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

and the HTML part for the css:

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

and when I create the css for smartphones: 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. dont' see my css setting on smartphones
2. in the monitor I see what I wrote the mobile.css

What shall I do?

Answer 1

Try using the media type 'screen' rather then 'handheld'. Most mobile devices will say they are a screen . So your css would be:

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