MEDIA QUERIES
@media all and (min-device-width: 480px)
@media all and (pixel-ratio: 2)
@media screen not (monochrome)
@media screen and (max-device-width: 640px)
and (touch-enabled: 1)
FLEXIBLE BOX LAYOUT
A B
div { display: flexbox; }
.a,.b { width: 40%; }
A B
.a,.b { width: flex(1); }
A B
.a { width: flex(3); }
.b { width: flex(2); }
Slide 22
Slide 22 text
FLEXIBLE BOX LAYOUT
a
.a {
flex-align: center;
flex-pack: center;
width: flex(0);
}
c
a
b
div { flex-flow: column; }
.a,.b { flex-order: 2; }
.c { flex-order: 1; }
Slide 23
Slide 23 text
GRID LAYOUT
div {
display: grid;
grid-columns: 1fr 1fr 2fr;
}
div {
display: grid;
grid-columns: 1fr 1fr 2fr;
grid-rows: 80px auto 10em;
}
THX. PLEASE BUY MY BOOK
http://nostarch.com/css3.htm
Slide 51
Slide 51 text
Superman copyright is a contentious issue, but the images I
use here belong to DC Comics and no permission was given. I
hope they fall under fair use doctrines. You should buy a
copy of All Star Superman – it’s really good!
LEGAL NOTE