Graphics Programs Reference
In-Depth Information
How? Consider some basic layout styles for a three-column layout.
body
{
background
:
#FFF
;
color
:
#000
;
font
:
small
Arial,
sans-serif
;}
.col
{
position
:
relative
;
margin
:
3em
1%
;
padding
:
0.5em
1.5%
;
border
:
1px
solid
#AAA
;
border-width
:
1px
1px
0
1px
;
float
:
right
;
width
:
20%
;}
#two
{
width
:
40%
;}
#footer
{
clear
:
both
;}
As nice as this might be (in a minimalist sort of way), it is likely to run into trouble on
smaller—which is to say, narrower—displays. What if you could magically change to a
two-column layout on such displays?
Well, you can. First, restrict the three-column layout to environments that are more than 800
pixels across. h is is done by splitting the layout bits into their own declarations:
body
{
background
:
#FFF
;
color
:
#000
;
font
:
small
Arial,
sans-serif
;}
.col
{
position
:
relative
;
margin
:
3em
1%
;
padding
:
0.5em
1.5%
;
border
:
1px
solid
#AAA
;
border-width
:
1px
1px
0
1px
;}
#footer
{
clear
:
both
;}
.col
{
float
:
right
;
width
:
20%
;}
#two
{
width
:
40%
;}
236
h en wrap those last two declarations in a media query:
@media
all and (min-width: 800px) {
.col
{
float
:
right
;
width
:
20%
;}
#two
{
width
:
40%
;}
}
What that says is “the rules inside this curly-brace block apply in all media that have a
minimum display width of 800 pixels.” Anything below that, no matter the medium, and the
rules inside the block will be ignored. Note the parentheses around the
min-width
term and
its value. h ese are necessary any time you have a term and value (which are referred to as an
expression).
Search WWH ::
Custom Search