Articles of responsive design

Il meta tag della vista è davvero necessario?

Ho creato alcuni siti reattivi ma sono piuttosto nuovo allo sviluppo del sito reattivo. Nel mio CSS il 99% dei miei valori sono in em o percentuali. Sto utilizzando le query multimediali (sia larghezza massima che larghezza massima del dispositivo) per apportare modifiche al layout. Non ho incluso un meta tag viewport e funziona perfettamente […]

Sistema a griglia fluido o fisso, in design reattivo, basato su Twitter Bootstrap

Mi sto confondendo sulle varie opzioni nella griglia di bootstrap di Twitter e su come vanno insieme. Per cominciare, puoi avere un normale container fisso o un container-fluid . Quindi uno dei due può includere una row ordinaria o una riga fluida, un fluido di fila. Cioè, puoi avere un contenitore fisso con una fila […]

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, […]

Triangolo reattivo CSS con larghezza delle percentuali

Il codice seguente creerà una freccia proprio sotto un elemento : JSFiddle .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after { content: “”; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-width: 10px 50px 0 50px; border-style: solid; border-color: […]

iOS 8 ha rimosso la proprietà viewport “minimal-ui”, ci sono altre soluzioni “soft fullscreen”?

(Questa è una domanda in più parti, farò del mio meglio per riassumere lo scenario). Attualmente stiamo sviluppando un’applicazione web retriggers (lettore di notizie) che consente agli utenti di scorrere tra i contenuti a tabs, nonché di scorrere verticalmente all’interno di ogni contenuto di tabs. Un approccio comune al problema consiste nell’avere un div wrapper […]

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 […]

Sito web reattivo ingrandito a tutta larghezza su dispositivo mobile

Sto testando il navbar di risposta Bootstrap e ho un sito web demo . Quando ridimensiono il browser su un desktop, tutto funziona bene, inclusa la barra di navigazione che diventa menu comprimibile con una piccola icona in alto che posso cliccare per vedere più pulsanti del menu. Ma quando l’ho provato da un browser […]

iPhone 5 query multimediale CSS

L’iPhone 5 ha uno schermo più lungo e non rileva la vista mobile del mio sito web. Quali sono le nuove query di progettazione retriggers per iPhone 5 e posso combinarle con le query di iPhone esistenti? La mia attuale query multimediale è questa: @media only screen and (max-device-width: 480px) {}

Come rimuovere le funzionalità reattive in Twitter Bootstrap 3?

Dal Bootstrap 3 non ci sono più file separati per fogli di stile reattivi e standard. Quindi, come posso rimuovere facilmente le funzionalità di risposta?