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 […]
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 […]
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, […]
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: […]
(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 […]
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 […]
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 […]
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 […]
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) {}
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?