Gestione tabella su pc e smartphone con @media

[pierdoom78]

Salve, cercando di ottimizzare la visualizzazione delle tabelle in modo che si vedano in maniera decente sia su pc che su smartphone ho provato con @media per vedere se riuscivo nell 'intento. Così  nel file template.css ho aggiunto alla fine queste righe:


  table#leo001 td {
    padding: 0px 1px 0px 3px;

    font-size: 10px;
}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {


    table#leo001 td  {
    font-size: 70%;
  }
}

Tengo a precisare che è tutto scopiazzato dalla rete, che è mia grande fonte di ispirazione.... Il problema è che le due regole:
  font-size: 10px; e font-size: 70%; non lavorano come mi aspettassi, nel senso che sembra che il pc e/o il telefono leggano solo la prima che incontrano, mentre io credevo che il telefono leggesse solo @media. Evidentemente così non è. Come funziona sta cosa? Oppure c'è qualche errore nel codice?
Grazie per la pazienza...

[lucantropo]

Puoi spiegare cosa intendi che non funzionano a dovere?
qual'è il comportamento che non ti convince?
Il tuo codice in ogni caso non mi convince, io quando uso le media query utilizzo una dicitura più semplice

Codice: [Seleziona]

@media (max-width: 800px) {
}In questo modo dico dico al template che dagli 800 px in giù deve interepretare il codice apposito, utilizzo poi altre query per risoluzioni più basse partendi dai 640px che dovrebbe essere un smartphone tipo sansung in versione land scape.

[pierdoom78]

Premetto che dopo aver postato a furia di cercare di capire come funziona una soluizone penso di averla trovata, intanto replico al gentile post di lucantropo.

Puoi spiegare cosa intendi che non funzionano a dovere?

Mi succedeva che se un elemento tipo table#leo001 td aveva una regola "normale" ed una in @media veniva recepita solo la prima che era scritta nel foglio di stile.  In pratica se nel foglio di stile le regole erano nell' ordine riportato qui sotto

Codice: [Seleziona]

  table#leo001 td {
    font-size: 14px;
}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    table#leo001 td  {
    font-size: 8px;
  }
}
sia su desktop che su mobile la dimensione del font sarebbe stata 14.

qual'è il comportamento che non ti convince?

Quello appena descritto

Il tuo codice in ogni caso non mi convince, io quando uso le media query utilizzo una dicitura più semplice

Codice: [Seleziona]

@media (max-width: 800px) {
}In questo modo dico dico al template che dagli 800 px in giù deve interepretare il codice apposito, utilizzo poi altre query per risoluzioni più basse partendi dai 640px che dovrebbe essere un smartphone tipo sansung in versione land scape.

Come ti dicevo il codice l' ho copiato di sana pianta da intenet, ho fatto anche altre prove ma nessuna convincente.
Comunque alla fine della fiera ho scoperto perchè le varie regole non venivano lette a seconda del dipositivo. Nel mio template, zenit_th, c'è il foglio di stile template.css e il foglio responsive.css, tutte le regole @media vanno in quest' ultimo. Difatti ora funziona tutte egregiamente....