css media query

alessandromonti

Utente Attivo
25 Mar 2012
62
0
0
buona sera..ho iniziato a mettere mano sulle CSS media queries..qui un banale esempio:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<link href="css/media_query.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="cont">cicco</div>
</body>
</html>

il media_query.css (caso iphone5):

* {margin:0; padding:0;}
#cont{position:relative;color:#000;margin:0 auto; background-color:#FF0; width:960px; height:600px;}

@media only screen
and (min-device-width:320px)
and (max-device-width:568px)
{
#cont{position:relative;color:#000;margin: 0 auto; background-color:red; width:70%; }
}

ho testato con http://beta.screenqueri.es/...http://designmodo.com/responsive-test/..ed altri...non riesco a cambiare il colore di sfondo del div cont da giallo a rosso ....mentre testando il tutto su dreamweaver la media query funziona...qualcuno sa dirmi qualcosa?

grazie
 
1- inserire il meta tag viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />) nella head ..cioè fissare la larghezza del viewport del browser alla larghezza dello screen del device..tra i pixel stabiliti con css e i pixel dello screen del device il rapporto è 1:1
2- la media query così:

@media only screen
and (min-width: 320px)
and (max-width: 568px)
and (orientation: portrait) {/* qui il codice*/}

per iphone posto orizzontale aggiungo anche:

@media only screen
and (min-width: 320px)
and (max-width: 568px)
and (orientation: landscape) {/* qui il codice*/}

..quanto trovato e capito...se ci sono correzioni...tutto orecchi...grazie
 
Ultima modifica:

Discussioni simili

M
Risposte
0
Visite
1K
HTML e CSS
Membro cancellato 49667
M