Layout adattivo del sito Web: istruzioni dettagliate con esempi

Layout è la creazione della struttura e del design degli elementi di una pagina web. Il codice di scrittura per una pagina Web è un designer di layout o uno sviluppatore front-end. Usa un programma grafico per tagliare i layout, un editor di codice, programmi aggiuntivi per accelerare il processo.

Qual è il layout

Il codice di layout è lo scheletro della pagina del sito, scritto nel linguaggio di markup html. Consiste di logicamente suddiviso in parti della pagina - tag. Ognuno di loro è responsabile della propria area: menu, footer, media, moduli, mappe, ricerca del sito, ora. Hanno attributi, con il loro aiuto vengono identificati i singoli elementi. I fogli di stile CSS sono responsabili del design e javascript per gli effetti dinamici.

Il layout qualitativo è ugualmente visualizzato su tutti i browser. Il risultato è determinato conducendo una serie di test. La capacità di lavorare su più di una piattaforma hardware si chiama multipiattaforma. Esistono diversi approcci per l'implementazione del layout, utilizzando diversi framework.

Per creare pagine secondo gli standard moderni, vengono utilizzati diversi metodi di layout adattivo. Ciò garantisce la corretta visualizzazione degli elementi su tutti i tipi di schermi.

Tipi di layout

Gli standard vengono costantemente migliorati e, di conseguenza, i modi di sviluppare i layout stanno cambiando. Al momento ci sono 3 tipi principali di pagine:

• statica;
• gomma;
• adattivo.

I layout statici sono pagine che non sono in grado di cambiare il loro design. Il loro design non cambia e le dimensioni degli elementi hanno un significato chiaro.

Il layout adattivo implica che gli elementi del sito si adattino alle dimensioni dello schermo del dispositivo utilizzato. Quando viene modificata la larghezza del documento, i blocchi vengono ricostruiti, alcune parti vengono sostituite da altre, alcuni elementi scompaiono. L'idea di adattabilità ha sostituito le versioni mobili del sito, vivendo su sottodomini separati. Il principio principale della creazione di adattabilità è sviluppare un progetto per tre schermi: un computer, un tablet, uno smartphone.

Quando si crea un layout di gomma, viene preso in considerazione anche il ridimensionamento dello schermo e tutti gli elementi vengono modificati. La principale differenza rispetto all'adattamento è che il layout si espande o si restringe sotto lo schermo in ogni momento del cambiamento.

Controlla quale dei principi usati, come segue. Se, quando si allunga una finestra del browser, una pagina viene allungata insieme a essa, allora questo è un layout di gomma. Quando una pagina del sito cambia solo in alcune posizioni, significa che è adattabile.

Dimensioni per layout adattivo

Per creare layout adattivi, vengono utilizzate unità di misura relative al posto del px statico standard. Il più comune:

• em;
• rem;
• %.

Nel layout adattivo su html, em è usato per impostare le dimensioni dei caratteri e dei rientri. Per impostazione predefinita, 1 em è 16 pixel. Di conseguenza, per impostare il carattere per un paragrafo p con una dimensione di 32 pixel, è necessario specificare quanto segue:

p {

font-size: 2em;

}

La particolarità di usare l'unità è che 1em è uguale alla dimensione del font del suo elemento. Cioè, 1em prende valori diversi in diverse parti del codice. Ad esempio, in un blocco in cui la dimensione del carattere è 2em (32px), il margine in 1em sarà 32 pixel. Ma dove il carattere è 1em (16px), il padding in 1em sarà uguale ai 16 pixel standard.

Rem - root em, che è definito nel tag . 1 root-em, a differenza di 1em, è uguale a un numero in qualsiasi circostanza. Il valore cambia solo quando le modifiche sono forzate.

Le percentuali vengono generalmente utilizzate per impostare la larghezza di blocchi o immagini. Indipendentemente dalle dimensioni dello schermo, corrisponderà al valore specificato, ad esempio 80%.

Media query

Il CSS include il supporto per vari parametri tecnici del dispositivo. Viene determinato uno smartphone con un'espansione di piccolo schermo, la proprietà dello stile è indicata sotto il suo valore. Le domande dei media rivelano differenze nell'orientamento: verticale e orizzontale. Ampiamente usato per creare un layout adattivo. Layout per adattarsi al specificato risoluzione dello schermo la struttura del documento cambia in base al codice.

Tipi di dispositivi determinati:

• dispositivi braille e stampanti in rilievo per non vedenti;
• stampa di stampanti convenzionali;
• schermo del monitor;
• discorso sintetizzatore vocale;
• tv

Nel valore del nome della richiesta ci sono diverse condizioni. Ad esempio, visualizza il contenuto solo per schermi monitor e solo una larghezza massima di 600 px. Sembra questo:

@media screen e (max-width: 600px) {codice uscita}.

La progettazione adattiva si basa sull'utilizzo di query multimediali. Un layout è stato creato per schermi con una larghezza minima di 1200 pixel, il corpo del codice è posto in @media screen e (max-width: 1200px) {}. Successivamente, viene creato un blocco per lo schermo @media e (min-width: 700px) tablets {} e @media screen e (max-width: 699px) {} dispositivi mobili.

Prima il cellulare

Secondo gli ultimi indicatori, dai dispositivi mobili e dai tablet a Internet arrivano molto più spesso dei computer. Di conseguenza, il traffico mobile diventa più significativo per i siti web. A causa di tali caratteristiche come una piccola dimensione dello schermo, gli utenti di gadget preferiscono i siti dalle prime righe dei risultati di ricerca, trascorrono meno tempo a cercare informazioni.

L'approccio di Mobile First prevede la visualizzazione dei contenuti più importanti, un sito web facile e ottimizzato, che rifiuta di scaricare altre risorse.

Il layout adattativo del sito secondo questa metodologia prevede la creazione iniziale di una pagina per schermi di piccole dimensioni e la successiva aggiunta di elementi come richiesto dal design della pagina per un monitor di grandi dimensioni. Nonostante la trasparenza dell'approccio, i clienti e gli implementatori compiono grandi sforzi per rivedere completamente il metodo abituale di sviluppo del sito.

bootstrap

Uno dei framework popolari che ha dato una risposta semplice alla domanda su come rendere il layout adattivo è Twitter Bootstrap. Con l'aiuto di una griglia di bootstrap a 12 colonne, vengono creati siti Web che vengono immediatamente visualizzati correttamente per impostazione predefinita sugli schermi dei dispositivi mobili. Gli strumenti principali utilizzati sono:

• larghezza predeterminata delle colonne, che può determinare la larghezza degli elementi;
• componenti di documenti fissi e in gomma;
• font e classi incorporati per loro;
• mezzi di tabelle di progettazione;
• classi di progettazione nella barra degli strumenti del menu.

Gli effetti dinamici sono scritti in jQuery, il preprocessore SASS SASS è usato per descrivere l'aspetto, e i popolari caratteri web sono incorporati nella funzionalità. I siti sviluppati sull'ultima versione di bootstrap non vengono visualizzati correttamente nelle versioni raramente utilizzate di browser come IE8, IE9 e iOS 6. È interessante notare che em root viene utilizzato come dimensione dei caratteri per alcuni elementi. Il sito web ufficiale contiene manuali dettagliati in inglese e russo, esempi di layout adattivo, metodi per l'utilizzo di componenti incorporati.

fondazione

Foundation è un framework potente, uno dei principali concorrenti di Twitter Bootstrap. Supporta tutte le dimensioni di griglie, ha un numero di vantaggi che mancano in Bootstrap.

I componenti sono caratterizzati da una vasta serie di effetti di animazione diversi che possono essere personalizzati. Per gestire gli stili, viene utilizzato il preprocessore SASS. L'elenco di modelli di base contiene cursori, barre di navigazione, icone dei social media.

Le dimensioni sono impostate dai valori indicati nella tabella.

Layout a griglia

Un altro sistema che merita attenzione è il layout della griglia. È un insieme di linee verticali e orizzontali intersecanti. Formano colonne e righe. Gli elementi vengono posizionati in una griglia, le loro dimensioni sono indicate in base a righe e tabelle. È possibile utilizzare dimensioni fisse, come px e flessibili - percentuali, rem ed em.

Al primo contenitore della griglia deve essere dichiarato.

display: griglia

La proprietà grid-template-columns viene utilizzata per impostare la larghezza della riga e la proprietà grid-template-rows viene utilizzata per le colonne. Le dimensioni possono essere specificate in una proprietà grid-template-columns. La larghezza delle bande è misurata in unità di fr, che rappresentano la frazione di spazio disponibile nel contenitore. È possibile utilizzare fx e px in una proprietà. Ad esempio, grid-template-columns: 500px 1fr 2fr.

conclusione

La pratica completa del layout adattivo dalla A alla Z prevede l'uso del numero massimo di metodi. Per disassemblare da zero quale layout è per tutti i dispositivi, è necessario utilizzare manualmente le query multimediali, calcolare le dimensioni delle immagini e dei caratteri. Dopo aver ottenuto le competenze appropriate, puoi iniziare a utilizzare i framework.