3. One monitor One browser
Sito ottimizzato per risoluzione 800x600, Browser:
Microsoft Internet Explorer, per problemi di
visualizzazione contattare il webmaster
17. Css 2.1 ha 10 media
● all: il CSS si applica a
tutti i dispositivi di
visualizzazione;
● screen: schermo di
computer;
● print: pagina stampata;
● projection: presentazioni
e proiezioni;
● speech: dispositivi a
sintesi vocale;
● braille: supporti basati sull’uso
del braille;
● embossed: stampanti braille;
● handheld: dispositivi mobili
con schermo piccolo e in
genere dotati di browser con
limitate capacità grafiche;
● tty: dispositivi a carattere fisso
come i terminali;
● tv: visualizzazione su schermi
televisivi.
22. Media Queries sono espressioni logiche che
ritornano "true" o "false" a seconda di come
vengono valutate.
Se sono vere, gli stili vengono applicati, se false,
vengono ignorati
24. Il termine Responsive Web Design (RWD) viene
utilizzato per indicare una particolare tecnica di
Web design per la realizzazione di siti web in
modo che le pagine adattino automaticamente il
layout per fornire una visualizzazione ottimale in
funzione dell'ambiente nei quali vengono
visualizzati riducendo al minimo all'utente la
necessità di ridimensionamento e scorrimento, in
particolare quello orizzontale. (wikipedia)
25. Media Query syntax:
rel="stylesheet" href="desktop.css"
media="[not | only] screen [and]
(expression)"
Le keywords “not”, “only”, and “and” possono
essere usate per filtrare i risultati, mentre le
espressioni possono essere utilizzate per
verificare la presenza di specifiche funzionalità
multimediali
30. orientation
//indica se il dispositivo di output è in modalità
landscape (la larghezza è maggiore dell’altezza)
oppure portrait (l’altezza è maggiore della larghezza)
<link rel="stylesheet" media="all and
(orientation:portrait)"
href="portrait.css">
<link rel="stylesheet" media="all and
(orientation:landscape)"
href="landscape.css">
31. aspect-ratio
//rapporto tra la larghezza (width) e l’altezza
(height) dell’area di visualizzazione
@media screen and (aspectratio: 4/3)
{
/* CSS rules*/
}
32. device-aspect-ratio
//rapporto tra la larghezza (width) e l’altezza
(height) dell’area di visualizzazione
@media screen and (deviceaspect
ratio: 16/9) {
/* CSS rules*/
}
33. Color
//Indica il numero di bit per ciascuna componente
colore sul dispositivo di output. Se 0 non supporta
il colore
@media all and (color) {
/* CSS rules*/
}
34. color-index
//numero di colori presenti nella tavolozza
<link rel="stylesheet" media="all and
(mincolorindex: 256)"
href="colore.css" />
36. ● Monochrome
● numero di bit per pixel su un dispositivo
monocromatico (a scala di grigi).
● Scan
● progressive oppure interlace. Relativa ai media TV
● Grid
● Se dispositivo è a bitmap o griglia
37.
38. IE
Respond.js
from the Filament Group
https://github.com/scottjehl/Respond
(gzipped version is 1kb)
css3-mediaqueries-js
by Wouter van der Graaf
http://code.google.com/p/css3-mediaqueries-js/
(15kb uncompressed)