Articles of media queries

Query media CSS per targetizzare solo iPad e iPad?

Ciao sto lavorando con più dispositivi tablet, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad e così via. iPad: 1024 x 768 LG Pad – 1280 x 768 Galaxy Tab – 1280 x 800 Voglio scegliere come target solo l’iPad utilizzando la query multimediale CSS3. Poiché, la larghezza del dispositivo di LG e iPad è […]

Cosa significa @media screen e (max-width: 1024px) in CSS?

Ho trovato questo pezzo di codice in un file CSS che ho ereditato, ma non posso avere alcun senso da esso: @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } In particolare, cosa sta succedendo in prima linea?

Le query multimediali CSS e la larghezza della finestra JavaScript non corrispondono

Per un modello reattivo, ho una query multimediale nel mio CSS: @media screen and (max-width: 960px) { body{ /* something */ background:red; } } E ho creato una funzione jQuery su ridimensiona per registrare la larghezza: $(window).resize(function() { console.log($(window).width()); console.log($(document).width()); /* same result */ /* something for my js navigation */ } E c’è una […]

Ottieni la larghezza del dispositivo in javascript

C’è un modo per ottenere la larghezza del dispositivo dell’utente, al contrario della larghezza della finestra, usando javascript? Le query multimediali CSS offrono questo, come posso dire @media screen and (max-width:640px) { /* … */ } e @media screen and (max-device-width:960px) { /* … */ } Questo è utile se sto prendendo di mira gli […]

Quali sono le regole per la sovrapposizione di query media CSS?

Come distanziamo accuratamente le query multimediali per evitare sovrapposizioni? Ad esempio, se consideriamo il codice: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } Cosa accadrà, attraverso tutti i browser di supporto, […]

Dovrei usare max-device-width o max-width?

Con le query multimediali CSS puoi utilizzare la max-device-width per indirizzare la max-device-width di un dispositivo (come un iPhone o un dispositivo Android) e / o una max-width che ha come target una larghezza di pagina. Se si utilizza la max-device-width , quando si modifica la dimensione della finestra del browser sul desktop, il CSS […]

Perché l’ordine delle query sui media è importante nei CSS?

Ultimamente, ho progettato siti più reattivi e ho utilizzato frequentemente le query multimediali CSS. Un modello che ho notato è che l’ordine in cui sono definite le query multimediali è importante. Non l’ho provato in ogni singolo browser, ma solo su Chrome. C’è una spiegazione per questo comportamento? A volte diventa frustrante quando il tuo […]

Nidificare le regole @media in CSS

Il supporto sembra essere diverso tra i vari browser Controlla il link Firefox: nero con testo bianco. Opera, Chrome, IE9: blu con testo nero. Quale è corretto e come lo renderei coerente? Il codice @media screen and (min-width: 480px) { body{ background-color:#6aa6cc; color:#000; } @media screen and (min-width: 768px) { body{ background-color:#000; color:#fff; } } […]

$ (window) .width () non è uguale alla media query

Sto usando Twitter Bootstrap su un progetto. Oltre agli stili di bootstrap di default ho anche aggiunto alcuni dei miei //My styles @media (max-width: 767px) { //CSS here } Sto anche usando jQuery per cambiare l’ordine di alcuni elementi sulla pagina quando la larghezza del viewport è inferiore a 767px. $(document).load($(window).bind(“resize”, checkPosition)); function checkPosition() { […]

Query media CSS: larghezza massima O altezza massima

Quando si scrive una query multimediale CSS, esiste un modo per specificare più condizioni con la logica “OR”? Sto tentando di fare qualcosa del genere: /* This doesn’t work */ @media screen and (max-width: 995px OR max-height: 700px) { … }