Articles of responsive design

La griglia di Bootstrap 3 di Twitter, che modifica il punto di interruzione e rimuove il riempimento

Sto cercando di passare alla nuova griglia di boostrap 3 e sto affrontando alcune difficoltà. Come avere la griglia per impilare sotto 480px ma non tra 480px e 768px? sopra 768px il padding a sinistra del primo e il padding a destra dell’ultimo sono all’esterno del contenitore, ma sotto a 768px il padding è all’interno […]

Come utilizzare Twitter Bootstrap 3 per siti non responsive?

Come puoi leggere sulla loro pagina, il nuovo Bootstrap 3 è “mobile first”: Con Bootstrap 2, abbiamo aggiunto stili facoltativi mobili per gli aspetti chiave del framework. Con Bootstrap 3, abbiamo riscritto il progetto per renderlo mobile fin dall’inizio . Invece di aggiungere gli stili mobili opzionali, sono integrati nel nucleo . In effetti, Bootstrap […]

Mantenere il rapporto di aspetto div in base all’altezza

Devo mantenere la larghezza di un elemento come percentuale della sua altezza . Così come l’altezza cambia, la larghezza viene aggiornata. È ansible ottenere il contrario utilizzando un valore% per padding-top, ma padding-left come percentuale sarà una percentuale della larghezza di un object, non la sua altezza. Quindi con markup come questo: Mi piacerebbe usare […]

Immagine di sfondo retriggers a schermo intero

Sono molto nuovo nello sviluppo e nella fondazione di Front-end. Sto cercando di ottenere come immagine a schermo intero che ridimensiona in modo reattivo. Qualcuno può dirmi cosa sto facendo di sbagliato? Sta ridimensionando correttamente, ma non mostra l’immagine completa. Volevo anche che trovasse sopra di esso su un dispositivo mobile – è ansible? L’HTML: […]

Come far espandere o contrarre un elemento al suo contenitore genitore?

L’objective è di espandere l’elemento alle dimensioni del suo contenitore genitore, in questo caso un , non importa quanto big o piccolo possa essere quel contenitore. Il codice: svg, #container{ height: 100%; width: 100%; } La soluzione più comune a questo problema sembra impostare l’attributo viewBox sull’elemento . viewBox=”0 0 widthOfContainer heightOfContainer” Tuttavia, questo non […]

tabella retriggers 3 bootstrap con prima colonna fissa

Sono mirato al mobile in modo specifico quindi ho una tabella retriggers Bootstrap. È solo un div con la class bootstrap “table-responsive” e una tabella annidata all’interno delle classi “table table-striped table-boundered table-hover table-condensed”. C’è un modo semplice per assicurarsi che la prima colonna sia fissa (non scorrendo orizzontalmente)? Sui dispositivi mobili, è probabile che […]

ridimensiona la dimensione del font in base alla dimensione div

Ho fatto questo jsfiddle l’html: header not a lot of text here but still overflowing con css: html, body { height: 100%; width: 100%; } #launchmain { width: 55%; display: inline-block; position: relative; top:10%; left:25%; } #launchmain:after { padding-top: 79.26%; display: block; content: ”; margin-top: 10px; } #box1 { border: 1px solid #000000; position: absolute; […]

Ridimensiona automaticamente le immagini con le dimensioni del browser utilizzando CSS

Voglio che tutte (o solo alcune) delle mie immagini vengano ridimensionate automaticamente quando ridimensiono la finestra del mio browser. Ho trovato il seguente codice: non fa nulla però. HTML CSS body { font-family: Arial; font-size: 11px; color: #ffffff; background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed; background-size: cover; } #icons { position: absolute; bottom: 22%; right: […]

Mantenere le proporzioni in base alla larghezza e all’altezza

È ansible adattare e centrare un div quadrato nel viewport e mantenere sempre le proporzioni in base alla larghezza e all’altezza ? Requisiti : solo CSS la dimensione del riquadro deve adattarsi alla dimensione più piccola (larghezza o altezza) della vista indipendentemente dall’orientamento (orizzontale o verticale) del viewport. il quadrato deve essere centrato orizzontalmente e […]

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