CSS Media Query

CSS Media Query

八月 31, 2020

Media Query

What is media query used for?

automatically adjust the layout according to user’s device.

1
2
3
4
5
@media (max-width: 1280px){ /*media feature result in true or false*/
p {
color: blue;
}
}

Media Query with Logical Operators

1
@media (min-width: 768px) and (max-width: 991px){...}

Devices with width within this range applies to styling in the curly bracket.

1
@media (max-width: 768px) , (min-width: 991px){...}

Devices with width is either < 768 or > 991 applies to styling in the curly bracket.

Notice: not to overlap range boundaries

12-Column Grid Responsive Layout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media(min-width: 950px) and (max-width:1199px){
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12

{
float: left;
border: 1px solid green;
}
.col-lg-1
{
width: 8.33%;
}
.col-lg-2
{
width: 16.67%;
}

}
/*etc.*/

<meta name="viewport" content="width=device-width, initial-scale=1">