How do I use css media queries?

hoodedvul

Note: If your media queries apply to all media types, " screen and" can be left out.

CSS media queries are similar to conditional statements in programming.

Also see: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

The following example uses media queries to change the background color depending on the size of the screen. The changes can be seen by changing the browser window size.

The media queries here are defined by the @media rule, other methods to use media queries are via the <link> tag and using the CSS @import rule.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Starter HTML Page</title>
  <meta name="description" content="HTML starter page">
  <meta name="author" content="Demo">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="">
  <style>
      body {
        background-color: blue;
      }
      @media screen and (min-width: 320px) {
        body {
          background-color: red;
        }
      }
      @media screen and (min-width: 550px) {
        body {
          background-color: pink;
        }
    </style>
</head>

<body>

<h2>The wonderful colors of flowers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet massa vitae tortor. Pretium nibh ipsum consequat nisl vel pretium. Interdum posuere lorem ipsum dolor.</p>

</body>
</html>