CSS Media Queries
CSS2 Introduced Media Types
The @media rule,
introduced in CSS2, made it possible to define different style rules for
different media types.
Examples: You could have
one set of style rules for computer screens, one for printers, one for handheld
devices, one for television-type devices, and so on.
Unfortunately these media
types never got a lot of support by devices, other than the print media type.
CSS3 Introduced Media Queries
Media queries in CSS3
extended the CSS2 media types idea: Instead of looking for a type of device,
they look at the capability of the device.
Media queries can be used
to check many things, such as:
- width
and height of the viewport
- width
and height of the device
- orientation
(is the tablet/phone in landscape or portrait mode?)
- resolution
Using media queries are a
popular technique for delivering a tailored style sheet to desktops, laptops,
tablets, and mobile phones (such as iPhone and Android phones).
Browser Support
The numbers in the table
specifies the first browser version that fully supports the @media rule.
|
Property |
|||||
|
@media |
21.0 |
9.0 |
3.5 |
4.0 |
9.0 |
Media Query Syntax
A media query consists of a
media type and can contain one or more expressions, which resolve to either
true or false.
@media not|only mediatype and (expressions) {
CSS-Code;
}
The result of the query is
true if the specified media type matches the type of device the document is
being displayed on and all expressions in the media query are true. When a
media query is true, the corresponding style sheet or style rules are applied,
following the normal cascading rules.
Unless you use the not or
only operators, the media type is optional and the all type
will be implied.
You can also have different
stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
CSS3 Media Types
|
Value |
Description |
|
all |
Used for all media type
devices |
|
print |
Used for printers |
|
screen |
Used for computer
screens, tablets, smart-phones etc. |
|
speech |
Used for screenreaders
that "reads" the page out loud |
Media Queries Simple Examples
One way to use media
queries is to have an alternate CSS section right inside your style sheet.
The following example
changes the background-color to lightgreen if the viewport is 480 pixels wide
or wider (if the viewport is less than 480 pixels, the background-color will be
pink):
Example
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
The following example shows
a menu that will float to the left of the page if the viewport is 480 pixels
wide or wider (if the viewport is less than 480 pixels, the menu will be on top
of the content):
Example
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
CSS Media Queries - More Examples
Let us look at some more examples of using media queries.
Media queries are a popular technique for delivering a tailored
style sheet to different devices. To demonstrate a simple example, we can
change the background color for different devices:
Example
/*
Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the
background color to blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the
background color to olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Media Queries For Menus
In this example, we use media queries to create a responsive
navigation menu, that varies in design on different screen sizes.
Large screens:
Small screens:
Example
/*
The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* On screens that are 600px wide or less,
make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Media Queries For Columns
A common use of media queries, is to create a flexible layout. In
this example, we create a layout that varies between four, two and full-width
columns, depending on different screen sizes:
Large screens:
Medium screens:
Small screens:
Example
/*
Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* On screens that are 992px wide or less, go
from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* On screens that are 600px wide or less,
make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tip: A more modern way of creating column
layouts, is to use CSS Flexbox (see example below). However, it is not
supported in Internet Explorer 10 and earlier versions. If you require IE6-10
support, use floats (as shown above).
Example
/*
Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go
from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less,
make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Hide Elements With Media Queries
Another common use of media queries, is to hide elements on
different screen sizes:
I will be hidden on small screens.
Example
/*
If the screen size is 600px wide or less, hide the element */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Change Font Size With Media Queries
You can also use media queries to change the font size of an
element on different screen sizes:
Variable Font Size.
Example
/*
If screen size is more than 600px wide, set the font-size of <div> to
80px */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* If screen size is 600px wide, or less, set
the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
CSS Flexbox
1
2
3
4
5
6
7
8
CSS Flexbox Layout Module
Before the Flexbox Layout
module, there were four layout modes:
- Block,
for sections in a webpage
- Inline,
for text
- Table,
for two-dimensional table data
- Positioned,
for explicit position of an element
The Flexible Box Layout
Module, makes it easier to design flexible responsive layout structure without
using float or positioning.
Browser Support
The flexbox properties are
supported in all modern browsers.
|
29.0 |
11.0 |
22.0 |
10 |
48 |
Flexbox Elements
To start using the Flexbox
model, you need to first define a flex container.
1
2
3
The element above
represents a flex container (the blue area) with three flex items.
Example
A flex
container with three flex items:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
CSS Flex Container
Parent Element (Container)
Like we specified in the previous chapter, this is a flex container (the
blue area) with three flex items:
1
2
3
The flex container becomes flexible by setting the display property
to flex:
Example
.flex-container {
display: flex;
}
The flex container properties are:
flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content
The flex-direction Property
The flex-direction property defines in
which direction the container wants to stack the flex items.
1
2
3
Example
The column value stacks the flex items
vertically (from top to bottom):
.flex-container {
display: flex;
flex-direction: column;
}
Example
The column-reverse value stacks the
flex items vertically (but from bottom to top):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Example
The row value stacks the flex items
horizontally (from left to right):
.flex-container {
display: flex;
flex-direction: row;
}
Example
The row-reverse value stacks the flex items
horizontally (but from right to left):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
The flex-wrap Property
The flex-wrap property specifies whether
the flex items should wrap or not.
The examples below have 12 flex items, to better demonstrate
the flex-wrap property.
1
2
3
4
5
6
7
8
9
10
11
12
Example
The wrap value specifies that the
flex items will wrap if necessary:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Example
The nowrap value specifies that the
flex items will not wrap (this is default):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Example
The wrap-reverse value specifies that the
flexible items will wrap if necessary, in reverse order:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
The flex-flow Property
The flex-flow property is a shorthand
property for setting both the flex-direction and flex-wrap properties.
Example
.flex-container {
display: flex;
flex-flow: row wrap;
}
The justify-content Property
The justify-content property is used to
align the flex items:
1
2
3
Example
The center value aligns the flex items
at the center of the container:
.flex-container {
display: flex;
justify-content: center;
}
Example
The flex-start value aligns the flex items
at the beginning of the container (this is default):
.flex-container {
display: flex;
justify-content: flex-start;
}
Example
The flex-end value aligns the flex items
at the end of the container:
.flex-container {
display: flex;
justify-content: flex-end;
}
Example
The space-around value displays the flex
items with space before, between, and after the lines:
.flex-container {
display: flex;
justify-content: space-around;
}
Example
The space-between value displays the flex
items with space between the lines:
.flex-container {
display: flex;
justify-content: space-between;
}
The align-items Property
The align-items property is used to align
the flex items.
1
2
3
In these examples we use a 200 pixels high container, to better
demonstrate the align-items property.
Example
The center value aligns the flex items
in the middle of the container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Example
The flex-start value aligns the flex items
at the top of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Example
The flex-end value aligns the flex items
at the bottom of the container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Example
The stretch value stretches the flex
items to fill the container (this is default):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Example
The baseline value aligns the flex items
such as their baselines aligns:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Note: the example uses different font-size to
demonstrate that the items gets aligned by the text baseline:
1
2
3
4
The align-content Property
The align-content property is used to align
the flex lines.
1
2
3
4
5
6
7
8
9
10
11
12
In these examples we use a 600 pixels high container, with
the flex-wrap property set to wrap, to
better demonstrate the align-content property.
Example
The space-between value displays the flex
lines with equal space between them:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Example
The space-around value displays the flex
lines with space before, between, and after them:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Example
The stretch value stretches the flex
lines to take up the remaining space (this is default):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Example
The center value displays display the
flex lines in the middle of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Example
The flex-start value displays the flex
lines at the start of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Example
The flex-end value displays the flex
lines at the end of the container:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Perfect Centering
In the following example we will solve a very common style
problem: perfect centering.
SOLUTION: Set both the justify-content and align-items properties
to center, and the flex item will be perfectly
centered:
Example
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
The CSS Flexbox Container Properties
The following table lists all the CSS Flexbox Container
properties:
|
Property |
Description |
|
align-content |
Modifies the behavior of the
flex-wrap property. It is similar to align-items, but instead of aligning
flex items, it aligns flex lines |
|
align-items |
Vertically aligns the flex
items when the items do not use all available space on the cross-axis |
|
display |
Specifies the type of box used
for an HTML element |
|
flex-direction |
Specifies the direction of the
flexible items inside a flex container |
|
flex-flow |
A shorthand property for
flex-direction and flex-wrap |
|
flex-wrap |
Specifies whether the flex
items should wrap or not, if there is not enough room for them on one flex
line |
|
justify-content |
Horizontally aligns the flex
items when the items do not use all available space on the main-axis |
