beta 1.0
Test
Elenco siti recensiti Segnala un errore Informazioni BLOG
Condivi su FacebookCondivi su Facebook Share on Google+Condividi su Google+ Richiedi preventivo refactory del tuo sito.Richiedi preventivo refactory del tuo sito. Metti RoadToResponsive nel tuo sitoMetti RoadToResponsive nel tuo sito
Tutti gli articoli






11/11/2013 -

Guida beginner

Media queries

Il concetto è quello di poter specificare stili diversi a seconda delle dimensioni dello schermo. Risulta dunque possibile impostare aspetti della pagina differenti a seconda delle circostanze, come per esempio l’orientamento dello schermo o la dimensione.
E’ possibile specificare proprietà diverse all’interno di uno stesso foglio di stile utilizzando gli attributi @media con determinati parametri, oppure si può decidere di effettuare l’importazione di un foglio stile separato con @import.
Sono supportati diversi parametri per le media query, tra cui schermo, stampa, tv, braille e occhiali 3D.
È infine possibile specificare operatori logici per determinarne il comportamento, come per esempio la dimensione massima o minima della finestra. Questi ultimi valori sono in effetti i più utilizzati, solitamente progettati per dimensioni standard di schermi. Ad ogni dimensione corrisponderanno comportamenti diversi.
Viene comunque offerta la possibilità di basarsi sull’orientamento del dispositivo oppure sul suo rapporto altezza/larghezza, nonché sulle proporzioni dei pixel.
 
@media screen and (max-width: 600px) {
#my-id {
color: red;
width: 20%;
}
}


  Condivi su Facebook Share on Google+      Tag:  Css  Manuale  Guida  Layout
Introduzione
Guida beginner
1 lezione

Introduzione

La struttura di un sito deve quindi oggi adeguarsi ai nuovi dispositivi, in modo da soddisfare questa enorme fetta di utenti.  La soluzione per queste esigenze è diventata il Responsive Web Design, abbreviato in RWD.


Tag:  Manuale  Guida
Responsive vs. Adaptive vs. Mobile
Guida beginner
2 lezione

Responsive vs. Adaptive vs. Mobile

Responsive indica la reattività di un sito ad i cambiamenti imposti dall’utente, per esempio la rotazione del dispositivo da verticale ad orizzontale, oppure lo zoom utilizzando due dita.


Tag:  Manuale  Guida
Layout flessibili
Guida beginner
3 lezione

Layout flessibili

La pratica si basa sulla progettazione di una griglia flessibile, in grado di ridimensionarsi dinamicamente con lo schermo a qualsiasi dimensione.


Tag:  Manuale  Guida  Layout
Mobile first
Guida beginner
4 lezione

Mobile first

Se state pensando di realizzare un sito compatibile con dispositivi mobili allora vi risulterà particolarmente comodo adottare la filosofia del mobile-first, ovvero pensarlo prima per dispositivi mobili e poi per desktop.


Tag:  Css  Manuale  Guida  Layout
Viewport
Guida beginner
5 lezione

Viewport

Buona parte degli odierni dispositivi mobili lavora piuttosto bene nel visualizzare i siti.
Un valido aiuto è però offerto dall'opportunità di utilizzare le caratteristiche del viewport, cioè dimensione, scala e risoluzione.


Tag:  Manuale  Guida  Layout  Html
Media flessibili
Guida beginner
6 lezione

Media flessibili

L'ultimo ed importante aspetto nel web design riguarda i media flessibili. Al cambiamento delle dimensioni del viewport non sempre segue il cambiamento dei contenuti multimediali, caratteristica però desiderata.


Tag:  Css  Manuale  Guida  Layout