Introduction to Media Queries in CSS

There is a special command @media that allows you to execute different code depending on the screen width.

In the following example, some code will run if the screen width is between 300px and 1200px:

css@media (min-width: 300px) and (max-width: 1200px) {
  /* some code */
}

In the following example, some code will fire if the screen width is greater than 300px:

css@media (min-width: 300px) {
  /* some code */
}

In the following example, some code will fire if the screen width is less than 1200px:

css@media (max-width: 1200px) {
  /* some code */
}

Let's write some code in our media query. For example, at certain screen sizes, we'll color the paragraphs red:

css@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

@media (min-width: 300px) and (max-width: 1200px) {
  p {
    color: red;
  }
}

Now let's color the paragraphs in different colors depending on the screen width:

css@media (max-width: 300px) {
  p {
    color: red;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  p {
    color: green;
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  p {
    color: blue;
  }
}
@media (min-width: 1200px) {
  p {
    color: orange;
  }
}

Задание 1

Let's apply the following code on a screen width from 0 to 800px:

cssp {
  font-size: 20px;
}

And let the following code be applied on a screen with a width of 800px and more:

cssp {
  font-size: 30px;
}

Задание 2

Let's apply the following code on a screen width from 0 to 500px:

cssp {
  font-size: 15px;
}

The following code should be applied on a screen width from 500px to 900px:

cssp {
  font-size: 20px;
}

The following code should be applied on a screen width of 900px and larger:

cssp {
  font-size: 30px;
}