[cc lang=”css”] @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { body { background: red; } } [/cc] Com isso estou dizendo: SE (é um dipositivo de tela) E (sua largura está entre 320 e 480), o terá um background vermelho. O site csstricks.com nos deu esse fantástico snippet [cc lang=”css”] /* 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 */ } html {background:url(images/body.gif);} body {margin:0; font-size:12px; line-height:20px; font-family:Arial, Helvetica, sans-serif; color:#FFFFFF; background:url(images/body_bckg.gif) repeat-x;} a {color:#EE4400; text-decoration:none;} a:hover {text-decoration:underline;} #container {background:url(images/main_bckg.jpg) center top no-repeat; width:1000px; margin:0 auto;} #logo {font-size:24px; font-family:"Impact", "Tahoma", Arial, "Geneva", sans-serif; padding:60px 100px 60px 140px;} #logo a {color:#FFFFFF; text-decoration:none; text-transform:uppercase;} #menu {height:40px; text-align:center;} #menu a {color:#FFFFFF; font-size:12px; font-weight:bold; text-decoration:none; margin:0 8px; text-transform:lowercase;} #menu a:hover {color:#000000;} #main {margin:0 110px; float:left; background:url(images/content_bckg.jpg) no-repeat #c225ba; min-height:400px; display:inline;} #text {margin:20px 220px 0 40px;} #text ul {padding:0; margin:10px 0 10px 40px;} #text li {list-style:none; padding-left:15px; background:url(images/li.gif) no-repeat 0px 8px;} h1 {margin:20px 0 0 0; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-size:22px; font-weight:normal;} #text p {margin:10px 0;} #sidebar {float:right; padding:20px 30px 0 30px; width:170px;} #sidebar h2 {font-family:Arial, Helvetica, sans-serif; margin:0 0 20px 0; text-transform:uppercase; font-size:18px; font-weight:normal;} #sidebar ul {margin:0; padding:0;} #sidebar li {list-style:none; border-bottom:1px solid #b961c9; padding:3px 2px;} #sidebar li:hover {background-color:#9819a2;} #sidebar a {text-decoration:none; color:#ff22c4;} #footer {padding:0 110px; height:169px; clear:both; background:url(images/footer_bckg.jpg) center top no-repeat;} #menu_footer {color:#7A2200; font-size:11px; padding:40px 0 0 30px;} #menu_footer a {color:#FFFFFF; text-transform:lowercase;} #left_footer {float:left; padding:60px 0 0 20px; font-size:12px; color:#FFFFFF;} #left_footer a {color:#FFFFFF;} #right_footer {float:right; padding:60px 20px 0 0; font-size:12px; text-align:right; color:#FFFFFF;} #right_footer a {color:#FFFFFF;} [/cc]