css espandendo basa su ritratto o paesaggio dello schermo dimensioni?

Question

Ho due div che galleggiano uno accanto all'altro. Quello che vorrei è quello di avere una larghezza di 100px quando si sta guardando in modalità verticale e consente di dire 200 px nel paesaggio. Ciò accade visualizzazione su un dispositivo mobile effettivamente.

Così il div si espanderà quando in modalità orizzontale e ridurre un po 'in verticale.

Tutte le idee?

Answer 1

Bene, questo non è possibile con CSS2, ma sarebbe possibile fare ciò che si vuole con JavaScript (leggere la dimensione dello schermo, ecc.).

Non sono sicuro di quello che la tecnologia si sta cercando in, ma CSS3 fornisce quindi esattamente ciò che si desidera con CSS3 media Queries .

Con CSS3 hai cose divertenti come questo (o si potrebbe anche specificare la larghezza per esempio 200px):

/* Portrait */
@media screen and (orientation:portrait) {
   /* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
   /* Landscape styles here */
}

questo esempio pagina maggiori spiegazioni, o questo .

Modifica Solo perché ho trovato oggi questa pagina: Hardbroiled CSS3 Media Queries -. molto buona writeup

Answer 2

È possibile farlo utilizzando la funzione di supporto CSS "orientamento". In questo modo è possibile specificare gli stili a seconda dell'orientamento dello schermo, non correlato dalla dimensione dello schermo. È possibile trovare la definizione ufficiale w3.org su questo supporto sono dotate di qui . In combinazione con le specifiche sulla developer.mozilla.org questo spiegherà come funziona.

---

Citazione di w3.org sulla funzione dei media ‘orientamento’:

  

La funzione di media ‘orientamento’ è ‘ritratto’ quando il valore della   ‘ Altezza ’ caratteristica dei media è maggiore o uguale per il valore della   ‘ Larghezza ’ sono dotate di mezzi di comunicazione. In caso contrario, ‘orientamento’ è ‘paesaggio’.

Una nota / citazione da developer.mozilla.org sulla funzione di "orientamento":

  

Nota: Questo valore (cioè verticale o orizzontale) non non corrispondono alle effettive dispositivo di orientamento .   Apertura della tastiera virtuale sulla maggior parte dei dispositivi con orientamento verticale volontà   provocare la finestra a diventare più largo che è alto, provocando   al browser di utilizzare stili di paesaggio, invece di ritratto.

---

Quindi, per ribadire, non è in realtà l'orientamento dello schermo che le domande trigger orizzontale o verticale dei media. Tuttavia è il rapporto tra altezza e larghezza dello schermo! A causa di questo ha senso anche per utilizzare la "funzione di orientamento" con dispositivi non mobili / tattili quindi ho aggiunto un piccolo demo per mostrare il comportamento di questi media query.

JSFIDDLE DEMO (provare a ridimensionare il porto vista )

Ecco le domande rappresentante dei media che influenzano orientamento verticale e orizzontale.

 @media screen and (orientation:portrait) {
     /* Portrait styles */
     /*set width to 100px */

 }
 @media screen and (orientation:landscape) {
     /* Landscape styles */
     /* set width to 200px*/

 }