Struttura CSS per la creazione di siti Web reattivi

Question

Struttura CSS per la creazione di siti Web reattivi

#1 da (1 voti)
#2 da (0 voti)
#3 da (0 voti)

2

Sono un ingegnere di back-end che lavora su una piccola squadra, quindi occasionalmente deve fare un po 'di front-end. Mi piace sviluppare un buon flusso di lavoro e una struttura del progetto prima di iniziare qualsiasi cosa, quindi mi sto chiedendo di creare un front-end reattivo per un'applicazione web.

Qual è il modo migliore per applicare i CSS alla creazione di siti Web reattivi che devono "ridimensionare" gli schermi più piccoli? In particolare: crei prima la versione per dispositivi mobili, quindi espandi il codice con le query dei media a larghezza ridotta nel CSS? Oppure fai il contrario, creando prima la versione con risoluzione desktop?

In secondo luogo, definisci più selettori di elementi e definizioni nella stessa query multimediale? O definisci una query multimediale per ogni elemento e selettore? Sembrerebbe che il secondo metodo potrebbe rendere il codice più leggibile, forse - anche se è sicuramente più frustrante "modificare" un sito di lavoro per creare una nuova versione con query multimediali piuttosto che una semplice rimozione delle vecchie impostazioni in una query multimediale e ri-stile le parti necessarie dalla nuova versione da zero.

html web-development css responsive-design

posta b.b. 27.11.2013 - 16:24

fonte

3 risposte

Leggi altre domande sui tag html web-development css responsive-design

Prova e rimuovi o rimuovi sempre AngularJS che si occupa di set di dati di grandi dimensioni (strategia)

score 1 · Answer 1

Se stai creando la struttura per lo sviluppo futuro di applicazioni Web, segui il primo approccio mobile. Per la seconda domanda, la risolvo come (solo un frammento del mio lavoro):

@media all and (max-width: 420px) {
    section, aside, .col1, .col2, .col3 {
        float: none;
        width: auto;
    }
}
@media all and (max-width: 978px) {
    header, footer {
        display: none;
    }
}

Puoi modellarlo ulteriormente secondo i requisiti.

Se gli stili sono comuni su più elementi, li combino in quanto riduce i byte per l'elaborazione e poi seguo le regole di specificità CSS per generare uno stile specifico per gli elementi.

score 0 · Answer 2

Ho scoperto che la creazione di un sito per dispositivi mobili è innanzitutto più semplice rispetto alla creazione di un sito desktop che risponda a una finestra mobile.

Per quanto riguarda le query multimediali, utilizzo le query multimediali per le dimensioni dello schermo tipiche. Inoltre, se c'è una dimensione che deve avere il layout ottimizzato, aggiungerò un'altra query multimediale. Quindi inserirò più selettori nella stessa query multimediale.

Ma alla fine, sta a te scegliere lo stile che preferisci e iniziare con le dimensioni dello schermo che ti piacciono. Né sono sbagliati.

score 0 · Answer 3

Utilizza un framework css e impara da loro

Crea prima la versione per dispositivi mobili.

Ti costringe a dare la priorità a elementi importanti, creando un UX fantastico

Utilizza più regole CSS all'interno della stessa query multimediale