CSS3 Media Queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ }

/* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }

/* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }

/* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }

/* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }

/* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }

/* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ }

/* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
<head>

<link rel='stylesheet' href='smartphone.css' media='only screen and (min-device-width : 320px) and (max-device-width : 480px)'>

<link rel='stylesheet' href='smartphone-landscape.css' media='only screen and (min-width : 321px)'>

<link rel='stylesheet' href='smartphone-portrait.css' media='only screen and (max-width : 320px)'>

<link rel='stylesheet' href='ipad.css' media='only screen and (min-device-width : 768px) and (max-device-width : 1024px)'>

<link rel='stylesheet' href='ipad-landscape.css' media='only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)'>

<link rel='stylesheet' href='ipad-portrait.css' media='only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)'>

<link rel='stylesheet' href='widescreen.css' media='only screen and (min-width : 1824px)'>

<link rel='stylesheet' href='iphone4.css' media='only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)'>

</head>