CSS Media Query

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">