Newsgroup: it.lavoro.professioni.webmaster
Titolo: media queries

Ho scoperto oggi le media queries ed ho settato la seguente che sembrava 
ottimale finché non ho girato il mio android in orizzontale
(in tal caso il layout torna quello che foglio di stile originario (il 
secondo tra i due riportati sotto):
 
 
<meta name="viewport" content="width=device-width">
          <link rel="stylesheet" href="/css/smartstyle.css" media="only 
screen and (max-width: 480px)" />
          <link rel="stylesheet" href="/css/blogstyle.css" media="only 
screen and (min-width:481px)" />
 
 
 
come devo fare per riuscire a vedere bene la pagina web sia leggendo un 
articolo tenendo dritto lo smart-phone, che girandolo in posizione 
orizzontale?

 orizzontale?
 
Fare un'altra regola con la larghezza del telefono in landscape, ma ti 
sconsiglio di ragionare in questo modo, perché alcuni telefoni sono 480, 
altri 640. Anche in portrait, alcuni sono 320, altri 360. Poi hai i 
tablet, ecc. ecc.
 
Conviene prendere un browser e stringere la finestra fino a 320 pixel, 
"disegnare" il css in modo che si veda bene a quella risoluzione, poi 
allargare la finestra piano piano finché non diventa brutto, e a quel 
punto mettere un breakpoint e fare una nuova media-query con min-width 
che parte da lì. E continui così finché non arrivi a coprire tutte le 
risoluzioni che vuoi.
 
Io solitamente mi fermo intorno ai 1280-1440 o al massimo 1680, e da lì 
metto margini.
 
Ma io odio i siti con più di una colonna "significativa" (alias: nella 
seconda colonna deve esserci solo il menu e possibilmente in 
position:fixed :P), quindi solitamente già a 960 tendo a fermarmi.
 
Bye.

Ero riuscito a mettere a posto la questione, ma faccio tesoro della tua 
esperienza e provo a implementare quanto mi dici.
Grazie molto per i consigli dettagliati.

Ho agevolmente messo in atto quanto mi hai indicato, però mi è rimasto 
un dubbio: nel CSS è sufficiente che io inserisca le istruzioni 
differenti rispetto a quello di partenza, o devo comunque inserire un 
nuovo CSS anche se ha molte parti in comune con il primo.
 
Premetto che avendo già un sito ho optato per un foglio di stile desktop 
leggermente modificato e poi ho fissato il miti massimi, per adesso solo 
'max 480px' per lo smartphone (android).
 

 nuovo CSS anche se ha molte parti in comune con il primo.
 
No, non duplicare mai gli stili identici, riporta solo ciò che deve variare nella versione responsive.

 
 > No, non duplicare mai gli stili identici, riporta solo ciò che deve 
variare nella versione responsive.
 >
 
Grazie per la risposta.
 
Sono già passato ad una serie di media-query interne all'originario CSS, 
che così ho potuto impostare dall'interno del mio CMS senza dover 
utilizzare dei CSS ad esso esterni. Tutto funziona bene; ho effettuato 
dei test con un emulatore che ho trovato (finora il migliore: 'Opera 
mobile emulator'; non ha tutti i modelli, ma ha molti formati).

 mobile emulator'; non ha tutti i modelli, ma ha molti formati).
 
Non ti serve un emulatore per provare le media-query. Basta ridimensionare 
la finestra del browser.
 
Sia Firefox che Chrome hanno poi dei plugin (o dei tool integrati) per 
avere un tot di risoluzioni predefinite, o per analizzare i css a ogni 
risoluzione.
 
Bye.

Grazie per le risposte.
 

 orizzontale?
 
considera che puoi mettere più condizioni min|max-width nella media query e quindi stabilire più condizioni alle quali caricare un foglio di stile.  ad esempio:
 
<link rel="stylesheet" href="/css/vecchi-smartfone-piccoletti.css" media="only screen and (max-width: 320px)" />
 
<link rel="stylesheet" href="/css/smartfone-normali-verticali.css" media="only screen and (min-width: 321px) and (max-width: 480px)" />
 
<link rel="stylesheet" href="/css/smartfone-normali-orizzontali.css" media="only screen and (min-width: 481px) and (max-width: 640px)" />
 
<link rel="stylesheet" href="/css/tablet.css" media="only screen and (min-width: 641px) and (max-width: 800px)" />
 
<link rel="stylesheet" href="/css/tablet-girati-e-desktop-vecchi.css" media="only screen and (min-width: 801px) and (max-width: 1024px)" />
 
<link rel="stylesheet" href="/css/desktop-normali.css" media="only screen and (min-width: 1025px) and (max-width: 1440px)" />
 
<link rel="stylesheet" href="/css/desktop-grandi.css" media="only screen and (min-width: 1441px)" />
 

Molto interessante, ma una cosa che non ho ancora ben compreso che mi 
pare dirimente è:
 
Se io scrivo una serie di media query semplici es.
 
 
@media screen and (max-width: 768px) {
 
{ Istruzioni }
 
}
 
@media screen and (max-width: 480px) {
 
{ Istruzioni }
 
}
 
@media screen and (max-width: 320px) {
 
{ Istruzioni }
 
}
 
 
Per uno smartphone 320 x 480
La query '320' si applica alla posizione portrait e la query '480' alla 
posizione landscape dello stesso cellulare?
 
..e  c'è una qualche interazione tra dimensione del dispositivo e 
risoluzione?
 
Faccio questa domanda da principiante perché questa mattina stavo 
customizzando una pagina per un smartphone di dimensioni normali direi 
320 x 480 e poi ho scoperto che sulla posizione landscape entrava solo 
la query settata per un 768px di larghezza massima.
 
Poi ho controllato la risoluzione del cellulare ed era indicata in 480 x 
800.
 
Alla fine ho fatto un pò 'a braccio' :) e ottimizzando la query per una 
larghezza massima 768px è andato tutto a posto.
 
Però non ho capito il perché!
 
 
 

 cellulare?
 
Non proprio. Essendo CSS la sigla per Cascading Style Sheet, si applicano 
tutte le regole adeguate.
 
E non c'è nessuna relazione tra il device e i css, ma solo tra la 
larghezza (a volte virtuale) della finestra e i css.
 
Quindi sul tuo cellulare in landscape verranno applicate la prima e la 
seconda regola, perché 768 è maggiore/uguale di 480, e naturalmente 480 è 
maggiore/uguale a 480. 
Ma non verrà applicata la terza, perché 320 è inferiore a 480.
 
Alcuni preferiscono usare min-width proprio per questo motivo: è più 
facile ragionare in termini di cosa aggiungere man mano che c'è più 
spazio, piuttosto che in termini di cosa nascondere quando non ce n'è.
 
Bye.

 Però non ho capito il perché!
 
probabilmente perché qualsiasi dispositivo che abbia una larghezza inferiore a 768px è  sicuramente un dispositivo mobile, e non lo schermo di un pc.  sul tuo cellulare in modo portrait sei a 480 quindi inferiore a 768 quindi si applica quella mediaquery.
 
quando invece sei in modo landscape a 800px la media query max 768px non si applica più e probabilmente il sito è fatto per funzionare bene anche ad 800px e oltre.

 appunto.  e già anche 480x800 comincia a non vedersi più tanto.
 
Vi ricordo quello che avevo scritto in un altro messaggio: i pixel dei css 
NON CORRISPONDONO coi pixel dei dispositivi mobile, ma dipendono dai dpi 
dello schermo.
 
È vero che ci sono telefoni in 2K o 3K, ma per i css e per javascript sono 
sempre e comunque 320/360 x 480/640.
 
Per questo sconsiglio sempre di decidere i breakpoint in maniera 
arbitraria, e semplicemente di stringere la finestra del browser finché 
non si rompe il layout e avete bisogno di una nuova media-query.
 
Bye.


 
dovrebbe esserci qualcosa tipo device-pixel-ratio, che però non ho mai
sperimentato, sia perché non ho nessuno di questi dipositivi che ti
fanno vedere un film ad alta risoluzione in un francobollo, sia perché
anche se li avessi ormai con la vista che ho non me ne farei niente
 
-- 
Maurizio Pistone    strenua nos exercet inertia  Hor.
 
http://blog.mauriziopistone.it
 
 
http://www.lacabalesta.it
 
 
http://blog.ilpugnonellocchio.it
 

Grazie, sei stato molto chiaro (nel frattempo il mio full-immersion mi 
aiuta a capire anche meglio il problema).