[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 */ }/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ body { margin: 20px 0; padding: 0; background: #FFFFFF; font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif; color: #666666; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; text-transform: uppercase; } a { color: #5D0E0E; } a:hover { text-decoration: none; color: #FF0000; } .image { float: left; margin: 0 15px 10px 0; } /* Header */ #header { width: 760px; height: 120px; margin: 0 auto; background: #000000 url(images/img1.jpg); } #header h1, #header h2 { float: left; padding: 94px 0 0 7px; font-size: 18px; } #header a { text-decoration: none; color: #FFFFFF; } /* Pages */ #pages { clear: both; width: 760px; height: 43px; margin: 0 auto; background: #000000 url(images/img2.gif); } #pages h2 { display: none; } #pages ul { float: right; margin: 0; padding: 7px 0 0 0; list-style: none; } #pages li { display: inline; } #pages a { display: block; float: left; height: 25px; margin: 0 2px 0 0; padding: 7px 15px 0 15px; text-transform: uppercase; text-decoration: none; letter-spacing: -1px; font-size: 14px; font-weight: bold; color: #FFFFFF; } #pages a:hover, #pages .active a { padding-left: 14px; padding-right: 14px; background: #580505 url(images/img3.gif); border: 1px solid #000000; border-bottom: none; } /* Boxed */ .boxed { float: right; width: 180px; margin-bottom: 10px; padding-left: 10px; } .boxed .heading { height: 26px; padding: 6px 0 0 10px; background: #5F1010 url(images/img4.gif); border: 1px solid #000000; border-bottom: none; font-size: 1em; color: #FFFFFF; } .boxed .content { background: #F2F2F2 url(images/img5.gif) repeat-x left bottom; } .boxed .content ul { margin: 0; padding: 10px; list-style: none; } .boxed .content li { padding: 3px 0; border-top: 1px dotted #5D0E0E; } .boxed .content li.first { border: none; } .boxed .content a { padding-left: 10px; background: transparent url(images/img8.gif) no-repeat left center; text-decoration: none; color: #5D0E0E; } .boxed .content a:hover { color: #FF0000; } /* Posts */ .post { background: #F2F2F2 url(images/img5.gif) repeat-x left bottom; } .post .title { padding: 0 0 0 13px; background: #FFFFFF url(images/img9.gif) no-repeat left center; color: #000000; } .post .posted { padding: 2px 10px 4px 10px; background: #5F1010 url(images/img4.gif); border: 1px solid #000000; border-bottom: none; font-size: .7em; font-weight: normal; color: #FFFFFF; } .post .story { padding: 10px 20px; } .post .meta { padding: 1px 10px; } /* Content */ #content { width: 760px; margin: 0 auto; padding: 20px 0; } /* Posts */ #posts { float: left; width: 370px; } /* Archives */ #archives { } /* Search */ #search form { margin: 0; padding: 20px 10px; } #textfield1 { width: 110px; padding: 2px 5px; background: #894F4F url(images/img6.gif) repeat-x; border: 1px solid #000000; font: bold 10px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #FFFFFF; } #submit1 { width: 30px; background: #5F1010 url(images/img7.gif) repeat-x; border: 1px solid #000000; text-transform: uppercase; font: bold 9px "Trebuchet MS", Arial, Helvetica, sans-serif; color: #FFFFFF; } /* Footer */ #footer { clear: both; width: 760px; margin: 0 auto; background: #FFFFFF url(images/img5.gif) repeat-x; } #footer p { padding: 10px; font-size: .8em; } [/cc]