Articles of responsive design

Riordinare i div in modo reattivo con Twitter Bootstrap?

Sto lavorando con Twitter Bootstrap v3 e voglio riordinare gli elementi in modo reattivo, usando l’ ordinamento e la compensazione delle colonne . Questo è il modo in cui vorrei usare i miei elementi. A -xs o -sm breakpoints, con il div contenente stack 4 in una riga: A punti di interruzione -md o -lg […]

Come codificare le query multimediali CSS che hanno come target TUTTI i dispositivi mobili e i tablet?

@media only screen and (max-device-width : 640px) { /* Styles */ } @media only screen and (max-device-width: 768px) { /* Styles */ } Questo è quello che ho finora. Il mockup PSD per il sito mobile su cui sto lavorando è largo 640 px. L’altra, la versione tablet del sito, è 768px. Sono stato in […]

La semplice pagina Bootstrap non risponde sull’iPhone

Ho scaricato l’esempio di Bootstrap di Twitter e ho creato un semplice progetto di guide. Ho copiato il css dove necessario e viene visualizzato correttamente. Ho anche copiato il js e tutto funziona alla grande sul mio desktop: riorganizza la pagina quando cambio la dimensione del mio browser. Quando si utilizzano alcuni “strumenti di test […]

Come posso evitare la sovrapposizione di query multimediali?

La cascata è ciò che rende i CSS speciali e potenti. Ma nel caso delle domande sui media, la sovrapposizione può sembrare problematica. Considera il seguente CSS (le regole continue per la sovrapposizione di query sui supporti CSS ): /* Standard – for all screens below 20em */ body { color: black; font-size: 1em; } […]

Angular2 – L’espressione è cambiata dopo che è stata selezionata: associazione alla larghezza div con gli eventi di ridimensionamento

Ho letto e investigato su questo errore, ma non sono sicuro di quale sia la risposta corretta per la mia situazione. Capisco che in modalità dev, il rilevamento delle modifiche viene eseguito due volte, ma sono riluttante a utilizzare enableProdMode() per mascherare il problema. Ecco un semplice esempio in cui il numero di celle nella […]

griglia di quadrati css con flexbox

Sto cercando di creare una griglia retriggers di quadrati. I quadrati devono essere ridimensionati per adattarsi alla larghezza della finestra. I quadrati non devono essere ridimensionati quando si modifica l’altezza del viewport. Ho ottenuto come regolare la larghezza di ogni quadrato, ma non so come rendere gli elementi quadrati e come ridimensionare la loro altezza […]

Immagini reattive con CSS

Sto trovando difficile ridimensionare le immagini per renderle reattive. Sto sviluppando un’applicazione php per convertire automaticamente un sito Web in una versione retriggers. Sono un po ‘bloccato sulle immagini. Ho aggiunto con successo una class wrapper a ogni immagine su un sito Web e posso ridimensionare le immagini abbastanza bene. Il mio problema sta nelle […]

Quali sono le query multimediali più importanti da utilizzare nella creazione di un design responsive per dispositivi mobili?

Esistono molte domande multimediali per le dimensioni dello schermo mobile. Può essere opprimente accoglierli tutti quando si progetta un sito mobile reattivo. Quali sono i più importanti da utilizzare durante la progettazione per dispositivi mobili? Ho trovato questo articolo che fa un ottimo lavoro nel delineare le query multimediali disponibili: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ . /* Smartphones (portrait […]

Come posso rendere un sito web reattivo?

Voglio sapere come creare un sito Web e tutti i suoi elementi rispondono per adattarsi a diverse dimensioni dello schermo: caratteri, immagini ecc … Devo fare qualcosa come questo: @media only screen and (max-width : 320px) { //here put the width and height of all the elements in the site } e renderlo per ogni […]

immagini responsive srcset non funziona

Ho cercato di implementare il nuovo approccio srcset alle immagini reattive, utilizzando il seguente codice HTML Sto usando Chrome 40 e tutto quello che ottengo è l’immagine più grande, ridimensionando il mio browser, cancellando la cache non fa nulla. Ho letto da qualche parte che ho dovuto riempire con polyfill, quindi ho usato il plugin […]