<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Background Color Example</title>
<style>
  /* Default styles for all screen sizes */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  /* Media query for screens smaller than 768px (tablets and mobiles) */
  @media screen and (max-width: 768px) {
    body {
      background-color: #ff6600; /* Change background color */
    }
  }

  /* Media query for screens smaller than 480px (mobiles) */
  @media screen and (max-width: 480px) {
    body {
      background-color: #3399cc; /* Change background color */
    }
  }
</style>
</head>
<body>

<h1>Responsive Background Color Example</h1>
<p>Background color changes with screen size</p>

</body>
</html>

 /* Default styles for all screen sizes */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  /* Media query for screens smaller than 768px (tablets and mobiles) */
  @media screen and (max-width: 768px) {
    body {
      background-color: #ff6600; /* Change background color */
    }
  }

  /* Media query for screens smaller than 480px (mobiles) */
  @media screen and (max-width: 480px) {
    body {
      background-color: #3399cc; /* Change background color */
    }
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.