Responsive Web design - media queries
Media (media) have introduced a query on CSS3: CSS3 @media queries .
Use @media queries, you can define different styles for different media types.
Examples
If the browser window is smaller than 500px, the background will change to light blue:
body {
background-color: lightblue;
}
}
try it"
Add a breakpoint
In the previous tutorial we use the rows and columns to create web pages, it is responsive, but on the small screen and not friendly show.
Media queries can help us solve this problem. We can add a breakpoint in the middle of the draft design, different breakpoints have different effects.
Desktop
Mobile devices
Use media queries 768px add breakpoints:
Examples
When the screen (the browser window) is less than 768px, the width of each column is 100%:
.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"
Priority for the mobile terminal design
Priority means moving end desktops and other devices designed to give priority to the mobile terminal design.
This means that we have to make some changes to the CSS.
We screen less than 768px in style changes need to be modified in the same style when the screen is wider than 768px. The following are examples of mobile end priority:
[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 a breakpoint according to their needs.
We also can tablet and mobile phone devices set breakpoints.
Desktop
Tablet
Mobile devices
600px screen when adding media queries, and set the new style (but less than the screen is larger than 600px 768px):
Examples
Note that two class styles are the same, but different names (col- and col-m-):
[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 looks more than a lot, but he can be set automatically according to the screen size of different styles, so it is still very necessary.
HTML Examples
For desktop:
The first and third section spanning three. Intermediate portion cross-domain 6.
For tablet devices:
The first cross-domain 3, the second section spanning 9, the third part of a cross-domain 12:
<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 screen / vertical screen
Combined with CSS media queries, you can create adapt to different orientation of the device (landscape landscape, portrait portrait, etc.) layout.
grammar:
orientation：portrait | landscape
- portrait: specify the output device in the visible region of the page height is greater than or equal to the width
- landscape: the value of inter portrait circumstances are landscape
Examples
If the vertical screen background will be light blue:
body {
background-color: lightblue;
}
}
try it"