CSS RWD Media Query

A media query in CSS is a method that targets the browser through some characteristics, features and user preferences and then execute or apply the styles on the elements.

A media query is specified in a @media rule which wraps the element with conditions describing when and where the styles need to be applied when these conditions are met by the browser.

CSS RWD Media Query - width Property

In the following example the body's background is changed to plum when the viewport width is wider than 35em and narrower than 85em. When the viewport width does not match that range of values, then it will fallback to white.

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   div {
      background-color: white;
      height: 300px;
      width: 300px;
   }

   @media (min-width: 35em) and (max-width: 85em) {
      div {
         background-color: plum;
      }
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

CSS RWD Media Query - Multiple Breakpoints

In the following example the body’s background is changed to different colors based on the size of the screen. Multiple breakpoints are set at different screen sizes using the max-width and min-width properties inside the media queries. On meeting the requirements of the media query, the styling is applied.

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box;
   }

   body {
      font-family: sans-serif;
      font-size: 35px;
      background-color: aqua;
      height: 1500px;
      width: auto;
   }
   
   .container {
      border: 4px solid red;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: aliceblue;
   }

   #size {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 35px;
   }

   @media (max-width: 512px){
      .container {
         background-color: plum;
      }
   }

   @media (max-width: 657px) and (min-width: 513px){
      .container {
         background-color: lightyellow;
      }
   }

   @media (max-width: 1000px) and (min-width: 658px) {
      .container {
         background-color: teal;
      }
   }

   @media (min-width: 1001px) {
      .container {
         background-color: bisque;
      }
   }
</style>
</head>
<body>
   <div class="container">Responsive Web Design</div>
   <div id="size"></div>
   <script>
      window.onresize = screen;
      window.onload = screen;

      function screen() {
         checkWidth = window.innerWidth;

         document.getElementById('size').innerHTML = "Width : " + checkWidth + "px";
      }
   </script>
</body>
</html>

CSS RWD Media Query - Using Orientation

In the following example the body’s background is set to bisque and the navigation bar is teal in color, when the orientation of the screen is landscape. As the screen is resized such that the orientation changes to portrait, the background color changes to seagreen and the navigation bar changes to orange and becomes sticky. The same feature is achieved using the media query.

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      background-color: bisque;
   }
   
   nav {
      block-size: 5rem;
      background: red;

   }

   @media only screen and (orientation: portrait) {
      nav {
            background: orange;
            position: sticky;
            top: 0;
            color: black;
      }
      body {
         background-color: seagreen;
      }
   }
</style>
</head>
<body>

   <nav>Navigation</nav>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>

   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque sequi tempora consequatur exercitationem itaque reprehenderit ratione veniam odit assumenda vel accusamus at ipsum, a odio velit laboriosam omnis excepturi voluptate.</p>
</body>
</html>
Advertisements