Responsive Web Design -
Media Queries
Media queries are described on CSS3:
CSS3 @media queries.
Using @media query, you can define different styles for different media types.
If the browser window is less than 500px, the background turns light blue:
@media only screen and (max-width: 500px)
{
body
{
background-color:
lightblue;
}}
Try it out . . .
Add a break point
In previous tutorials we used rows and columns to create web pages that were responsive, but not friendly on the small screen.
Media queries can help us solve this problem.
We can add break points in the middle of the design, and different break points have different effects.
Desktop devices
Mobile phone device
Use media queries to add break points at 768px:
When the screen (browser window) is less than 768px, the width of each column is 100%:
/* For desktop: */
.col-1
{
width:
8.33%;
}
.col-2
{
width:
16.66%;
}
.col-3
{
width:
25%;
}
.col-4
{
width:
33.33%;
}
.col-5
{
width:
41.66%;
}
.col-6
{
width:
50%;
}
.col-7
{
width:
58.33%;
}
.col-8
{
width:
66.66%;
}
.col-9
{
width:
75%;
}
.col-10
{
width:
83.33%;
}
.col-11
{
width:
91.66%;
}
.col-12
{
width:
100%;
}
@media only screen and (max-width: 768px)
{
/* For mobile phones: */
[class*="col-"] {
width:
100%;
}}
Try it out . . .
Design for mobile priority
Mobile first means that mobile design is preferred when designing desktops and other devices.
That means we have to make some changes to CSS.
We make style changes when the screen is less than 768px, and we also need to modify styles when the screen width is greater than 768px.
Here are the mobile-first instances:
/?Designed for mobile:
[class*="col-"]
{
width:
100%;
}
@media only screen and (min-width: 768px)
{
/* For desktop: */
.col-1 {
width:
8.33%;
}
.col-2
{
width:
16.66%;
}
.col-3
{
width:
25%;
}
.col-4
{
width:
33.33%;
}
.col-5
{
width:
41.66%;
}
.col-6
{
width:
50%;
}
.col-7
{
width:
58.33%;
}
.col-8
{
width:
66.66%;
}
.col-9
{
width:
75%;
}
.col-10
{
width:
83.33%;
}
.col-11
{
width:
91.66%;
}
.col-12
{
width:
100%;
}}
Other break points
You can add break points to your needs.
We can also set break points for tablet and mobile devices.
Desktop devices
Tablet device
Mobile phone device
Add a media query when the screen is 600px and set a new style (screen greater than 600px but less than 768px):
Note that the two sets of class styles are the same, but have different names (col- and col-m-):
/* For mobile phones: */
[class*="col-"]
{
width:
100%;
}
@media only screen and (min-width: 600px)
{
/* For tablets: */
.col-m-1 {
width:
8.33%;
}
.col-m-2
{
width:
16.66%;
}
.col-m-3
{
width:
25%;
}
.col-m-4
{
width:
33.33%;
}
.col-m-5
{
width:
41.66%;
}
.col-m-6
{
width:
50%;
}
.col-m-7
{
width:
58.33%;
}
.col-m-8
{
width:
66.66%;
}
.col-m-9
{
width:
75%;
}
.col-m-10
{
width:
83.33%;
}
.col-m-11
{
width:
91.66%;
}
.col-m-12
{
width:
100%;
}}
@media only screen and (min-width: 768px)
{
/* For desktop: */
.col-1 {
width:
8.33%;
}
.col-2
{
width:
16.66%;
}
.col-3
{
width:
25%;
}
.col-4
{
width:
33.33%;
}
.col-5
{
width:
41.66%;
}
.col-6
{
width:
50%;
}
.col-7
{
width:
58.33%;
}
.col-8
{
width:
66.66%;
}
.col-9
{
width:
75%;
}
.col-10
{
width:
83.33%;
}
.col-11
{
width:
91.66%;
}
.col-12
{
width:
100%;
} }
Try it out . . .
The above code looks a lot, but it's still necessary because he can automatically set different styles depending on the screen size.
HTML instance
For desktop devices:
The first and third parts span 3 columns.
The middle part spans 6 columns across domains.
For tablet devices:
The first spans 3 columns, the second part spans 9 columns, and the third part spans 12 columns:
<
div
class=
"row"
>
<
div
class=
"col-3 col-m-3"
>
...
<
/div
>
<
div
class=
"col-6 col-m-9"
>
...
<
/div
>
<
div
class=
"col-3 col-m-12"
>
...
<
/div
>
<
/div
>
Direction: horizontal/vertical
Combined with CSS media queries, you can create layouts that fit the orientation of different devices (horizontal landscape, vertical portrait, and so on).
Grammar:
orientation:portrait | landscape
-
Portrait: Specifies
that the height of the page visible area in the output device is greater than or equal to the width
-
Landscape: All
but portrait values are landscape
If the horizontal background will be light blue:
@media only screen and (orientation: landscape)
{
body
{
background-color:
lightblue;
}}
Try it out . . .