Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Viewport and Media Query for body

  • viewport
  • @media
  • screen
  • min-width
  • max-width
<html>
<head>
  <title>Viewport + Media query for body</title>
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
  <style>
  body {
      background-color: lightblue;
  }

  @media screen and (min-width: 700px) {
     body {
         background-color: blue;
     }
  }

  @media screen and (min-width: 1200px) {
     body {
         background-color: red;
     }
  }
</style>
</head>
<body>
</body>
</html>