CSS media query per smartphone

Ciao a tutti.
Avrei bisogno di un'indicazione riguardo alle media queries da usare con gli smartphone.
Ho provato un sacco di impostazioni ma non riesco a trovare quella che funziona.

	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen and (max-width: 800px)"
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen and (min-width:321px)" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen and (orientation:portrait) and (min-width:321px)" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen and (min-width: 481px) and (max-width: 680px)" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen and (max-width: 480px) and (orientation: portrait)" />
	<link rel="stylesheet" href="css/style.css" type="text/css" media="only handheld" />

Di queste non ce n'è una che sia una che funzioni.

Ad esempio imposto una pagina html con un div con la proprietà width: 30% su "only screen" e me lo mostra bene, poi lo provo su smartphone e lì lo voglio width: 90%: lo vedo sempre al 30%.
Non so più davvero cosa fare, oltre a quelle indicate sopra ho provato anche altre mille "media=" senza risultato.

Ho paura che sia colpa degli smartphone che ormai hanno una tecnologia molto alta, quindi per indicare un cellulare potrebbe non bastare la sola indicazione 480px o 800px.

Aiutooooo
e grazie.
Ugo

P.S.: l'opzione "orientation:Landscape" non mi serve su questo sito.

Non sono sicuro che tu possa mettere le Media Query all'interno dell'attributo media nel tag di importazione del foglio di stile, o quantomeno non sono certo che sia supportata in tutti i browser.

A parte l'evidente scomodità, e anche la necessità di scaricare inutilmente una serie di CSS separati, quelle espressioni conviene metterle direttamente all'interno del foglio di stile, come indicato in questi esempi.

Ciao!

Grazie _alka_ della risposta.
Guardando gli esempi noto che "@media" è seguita da un numero di pixel che fa a pugni con gli smartphone.
Il mio smartphone ha una risoluzione di 768x1280 pixel, quindi dovendo usare una dimensione adeguata come limite dovrei scegliere 768 (o 769) ma 768 è anche una risoluzione riconducibile agli schermi dei pc, quindi sovrapponibile in modo che il browser non potrebbe riconoscere se stiamo aprendo la pagina da uno smartphone o da un pc, facendo così apparire in un caso o nell'altro la pagina nel formato sbagliato.
Quanto all'uso dell'attributo media il codice è corretto, nel file html va messo il link al file css e alla sezione di riferimento "media"; è quello che c'è dopo che non funziona.
Spero che qualcuno possa aiutarmi a risolvere il problema, un mio amico che crea siti per lavoro mi ha detto che non usa le media queries (perciò non sa aiutarmi) ma scrive direttamente 2 volte il codice html, una per smartphone e tablet e l'altra per i pc. Questa cosa non mi sta bene, le media queries evitano questo doppio lavoro e vorrei tanto poterle sfruttare.
Ciao
Ugo

Originariamente inviato da UGoldrake

Spero che qualcuno possa aiutarmi a risolvere il problema [...]

A questo punto però, sono in difficoltà nel capire quale sia il reale problema:
non sai come "attivare" le media query?
oppure non sai quali valori specificare nelle query creando i cosiddetti "breakpoint"?

Oltre alla pagina che ti ho già citato, prova a vedere come sono state utilizzate le query all'interno di framework che ne fanno un uso smodato, tipo Bootstrap.

Ad esempio, guarda i Responsive Breakpoints che sono stati prestabiliti nel framework CSS.

Ciao!

La seconda: quali valori usare ma, proprio ieri, ho trovato questa combinazione che sembra funzionare:

media="(min-width: 768px) and (max-width: 1280px)"

anche se mi fa apparire lo stesso layout sia con l'orientamento orizzontale che verticale.
In teoria sarebbe meglio che in senso verticale mostri una cosa ed in senso orizzontale mostri come se fosse su schermo del pc.
Ora ci studio, comunque grazie.

Ugo

Originariamente inviato da UGoldrake

In teoria sarebbe meglio che in senso verticale mostri una cosa ed in senso orizzontale mostri come se fosse su schermo del pc.

Magari l'errore è proprio nel CSS, ma senza vedere il codice nel suo insieme è difficile fare supposizioni.

E comunque, sapendo anche che le query possono essere combinate e nidificate, continuo a ritenere il mettere la query nell'attributo "media" come la cosa più scomoda e inefficace mai vista.

Scusa ma a questo punto devo capire, c'è un altro metodo per unire i file html ai css?

Finora so solo di questo, in html:

	<link rel="stylesheet" href="css/screen.css" type="text/css" media="only screen" />
	<link rel="stylesheet" href="css/smartphone.css" type="text/css" media="(min-width: 768px) and (max-width: 1280px)" />

e nei css:

@media only screen in screen.css
e
@media (min-width: 768px) and (max-width: 1280px) in smartphone.css

Ciao
Ugo

PS: se vuoi posso linkarti il sito

Originariamente inviato da UGoldrake

c'è un altro metodo per unire i file html ai css?

No, direi che i modi che hai citato sono gli unici.

Io intendevo dire di privilegiare la versione "dentro al CSS", eliminando l'uso dell'attributo "media" nell'elemento "link" di importazione.

Se hai ancora problemi, scrivi qual è il risultato desiderato e riporta il link.

Ciao!

Grazie della disponibilità.
Il sito è qui
La colonna di destra non mi dà problemi mentre quella di sinistra la dovresti vedere come organizzata in maniera tabellare con a sinistra-sinistra una breve descrizione e di fianco l'immagine.

I problemi sono diversi e nota che salvato su disco, come ho già detto, funziona alla grande.
Primo problema: la descrizione non segue l'immagine ma la seconda descrizione si pone sotto la prima a sx della medesima immagine.
Secondo problema: nella sezione FILATI la scritta "Molte altre qualità e colori ti aspettano in negozio!" dovrebbe essere in fondo e larga 90% invece risulta solo al 40%, senza ombreggiatura e si posiziona dove vuole lei.
Terzo problema: le immagini si dovrebbero ingrandire al passaggio del mouse :hover solo in modalità desktop, mentre in modalità smartphone no, invece o lo fa solo su smartphone oppure lo fa su entrambe le modalità, a seconda del tempo.
Quarto problema: le scritte descrittive devono occupare tutta la casellina, invece anche qui ne occupano solo il 40%.

La beffa di tutto sta nel debug, che eseguo in Chrome con F12, che mi indica di verificare le righe del file css che non vanno bene, e facendo la verifica il valore risulta corretto; poi sempre in debug modifico i valori, aggiungo le proprietà e va tutto a posto, ovviamente, ma se riscrivo tutto sul file css non viene considerato.

Ti ringrazio ancora della disponibilità, se vuoi cerco di mandarti il codice.
Grazie

Ugo