Primi passi con "mediaquery"

di
chucky831
il
1 risposte
C
chucky831
Pochi posts
Iscritto da
ago, 2008
Messaggi:
17

Primi passi con "mediaquery"

Ciao a tutti, ho un problema con mediaquery. Ho un div color blu e quando giro il tablet deve diventrami rosso. Per far questo ho fatto cosi solo che non mi funziona. ho provato con un tester online ma nessun risultato.
<html>

<head>

 <style type="text/css">
 
 @media screen and (max-width: 600px) {
  #container {
    background-color:red;
  }
}
 
 #container{
 
 width:500px;
 height:500px;
 border:solid blue 5px;
 background-color:blue;
 }
 
</style>


</head>


<body>

<div id="container">

</div>
</body>

</html>

1 Risposte

  • D
    dvaosta
    Molto attivo
    Iscritto da
    lug, 2012
    Messaggi:
    962

    Re: Primi passi con "mediaquery"

    I css si chiamano fogli di stile a cascata perché l'ultima regola relativa a un selettore sovrascrive le precendenti. quindi se tu metti la query, ma poi dopo metti la regola di default dove dici che il div dev'essere blu, allora questo sarà sempre blu.

    Prova a invertire i pezzi.

    P.S.: comunque le media query sono un metodo abbastanza sconsigliato per modificare i css. In questo caso può andare bene, ma se ad esempio hai una query che si attiva al resize della pagina, questa verrà eseguita un numero enorme di volte anche per resize minimi; se invece usi javascript puoi impostare un setInterval(), che si attiva all'inizio del ridimensionamento e ripete la funzione ogni tot millisecondi fino al termine; in questo modo, anche se metti un intervallo molto breve (in genere, 1/20 di secondo va più che bene), esegui comunque meno operazioni che con le query.

    ciao
Devi accedere o registrarti per scrivere nel forum
1 risposte