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
 

alessandromonti

Utente Attivo
25 Mar 2012
62
0
0
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
Autore Titolo Forum Risposte Data
M problema con media query CSS HTML e CSS 1
G Input checkbox in CSS HTML e CSS 0
G classe CSS sovrascritta HTML e CSS 2
G file CSS contenente variabili HTML e CSS 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
L problema collegamento file css con html HTML e CSS 1
M CSS "puro" HTML e CSS 0
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
Z Google Fonts CSS tra desktop e responsive HTML e CSS 1
Z Slide show CSS HTML e CSS 1
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
V Galleria con CSS e Javascript Javascript 2
C CSS pagina a schermo intero HTML e CSS 3

Discussioni simili