CSS media queries

Media queries are a functionality that appears with CSS2 and is improved with CSS3.

Media queries allow us to define a series of CSS rules depending on the device type eg screen, printer, TV, etc.

Currently, where they are most used is to implement sites that are adaptable to the device where they are executed: cell phone, tablet, PC, etc.

To see how it works, we will implement a page that adapts the main "div" depending on the width of the device.

page1.html

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <div class="container">  
    <h1>Title</h1>
    <p>Container data</p>
  </div>
</body>
</html>

styles.css

.container {
  width:100%;
  margin:0 car;
  height:200px;
  background-color:#eee;  
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
    background-color:#ddd;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
    background-color:#ccc;	
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
    background-color:#bbb;	
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    background-color:#ccc;		
  }
}

A media query is defined with the keyword media preceded by the @ character. Then, in parentheses, we indicate the condition that a style sheet property must meet. If the value of the property is verified as true, the entire block enclosed in the braces is executed:

@media (min-width: 576px) {
  .container {
    max-width: 540px;
    background-color:#ddd;
  }
}

For example, if we open the browser and resize it to a size less than 576 pixels, something similar to this appears:

Output:

The condition (min-width: 576px) checks with false, so the rule is not executed:

  .container {
    max-width: 540px;
    background-color:#ddd;

In other words, the container class remains with the previously defined value:

.container {
  width:100%;
  margin:0 car;
  height:200px;
  background-color:#eee;  
}

Now let's start increasing the size of the browser width and we can verify that when it reaches or exceeds the value of 576px the maximum width is defined with the value 540px.
This is because the style for the container class is updated because the media is true defined query (min-width: 576px):

  .container {
    max-width: 540px;
    background-color:#ddd;
  }

Output

If we continue to increase the width size and reach or exceed 768px then the second media query also checks true:

@media (min-width: 768px) {
  .container {
    max-width: 720px;
    background-color:#ccc;	
  }
}

This causes the final value for the max-width and background-color property to be set to these values:

Output:

We also define for sizes greater than or equal to 992px and 1200px:

@media (min-width: 992px) {
  .container {
    max-width: 960px;
    background-color:#bbb;	
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    background-color:#ccc;		
  }
}

The order in which we define the media queries for this problem is important since, for example, if the device has a width of 1920 pixels, all the conditions are true, but the max-width and background-color properties are defined by the last assignment:

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    background-color:#ccc;		
  }
}

dimensions

We can define a media query for a certain device, for example for a printer:

@media print and (min-width:1000px) {
  ...
}

When we do not have the default medium for everyone, we could have coded the previous exercise as:

@media all and (min-width: 576px) {
  .container {
    max-width: 540px;
    background-color:#ddd;
  }
}

In other words, if the media query is applied to all media, we can ignore the "all and" part.

If we analyze the source code of the Bootstrap framework we will see that it makes a very important use of media queries to implement the concept of adaptive pages.

dimensions

Robort Gabriel

Lagos, Nigeria

Skills