YouTip...
...
...
Css Rwd Mediaqueries
* * *
Media queries are introduced in CSS3: [CSS3 @media queries](#).
Using @media queries, you can define different styles for different media types.
## Example
If the browser window is smaller than 500px, the background will become light blue:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
[Try it Β»](#)
* * *
## Adding Breakpoints
In previous tutorials, we used rows and columns to create web pages. It is responsive but does not display well on small screens.
Media queries can help us solve this problem. We can add breakpoints in the design, where different breakpoints have different effects.
### Desktop
!(#)
### Mobile
!(#)
Use media queries to add a breakpoint at 768px:
## Example
When the screen (browser window) is less than 768px, each column should be 100% width:
/* 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 Β»](#)
* * *
## Mobile First Design
Mobile first means prioritizing the design for mobile devices when designing for desktop and other devices.
This means we must make some changes to the CSS.
We modify styles for screens smaller than 768px, and also need to modify styles for screens wider than 768px. Here is a mobile-first example:
/* For mobile devices: */
[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 Breakpoints
You can add breakpoints as needed.
We can also set breakpoints for tablet and mobile phone devices.
### Desktop
!(#)
### Tablet
!(#)
### Mobile
!(#)
Add a media query at 600px and set new styles (for screens larger than 600px but smaller than 768px):
## Example
Note that the two sets of class styles are the same, but with 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 Β»](#)
The above code may seem redundant, but it automatically sets different styles based on screen size, so it is still very necessary.
## HTML Example
For desktop devices:
The first and third sections span 3 columns. The middle section spans 6 columns.
For tablet devices:
The first section spans 3 columns, the second section spans 9 columns, and the third section spans 12 columns:
* * *
## Orientation: Landscape/Portrait
Combining CSS media queries, you can create layouts that adapt to different device orientations (landscape, portrait, etc.).
### Syntax:
orientationοΌportrait | landscape
* **portrait:** Specifies that the visible area of the page in the output device is greater than or equal to the width.
* **landscape:** Except for the portrait case, everything else is landscape.
## Example
If the screen is in landscape orientation, the background will be light blue:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
[Try it Β»](#)