Tageting Different Screen Widths with Multiple CSS files

[rmulken]

Here are links to my CSS files:\[code\] <link rel="stylesheet" href="http://stackoverflow.com/questions/13868129/css/mobile_css_320.css" media="screen and (min-device-width: 0px) and (max-device-width: 320px)" /> <link rel="stylesheet" href="http://stackoverflow.com/questions/13868129/css/mobile_css_480.css" media="screen and (min-device-width: 321px) and (max-device-width: 480px)" /> <link rel="stylesheet" href="http://stackoverflow.com/questions/13868129/css/mobile_css_640.css" media="screen and (min-device-width: 481px) and (max-device-width: 640px)" /> <link rel="stylesheet" href="http://stackoverflow.com/questions/13868129/css/mobile_css_720.css" media="screen and (min-device-width: 641px) and (max-device-width: 720px)" /> <link rel="stylesheet" href="http://stackoverflow.com/questions/13868129/css/styles.css" media="screen, projection" />\[/code\]Here is my link in styles.css (for Web Browsers on PC's)\[code\]#form_wrapper { width: 320px; margin: 0 auto;}\[/code\]In all other CSS files (targeting Mobile Devices), I do this:\[code\]#form_wrapper { width: 92%; margin: 0 auto;}\[/code\]However, in all Mobile devices, it goes straight to the last CSS file, styles.css and I get that div 320px on all devices no matter what. I have only tested on Google's Chrome for Android on mobile devices as well as the stock Android webkit browser (for Android 4.0+). Is my code handling wrong?