Responsive design with CSS media Queries 1
GeneralFrontend Development

Responsive Design with CSS Media Queries

3 Mins read

Today, this article will help you learn how CSS Media Queries help you build responsive websites. If you are a beginner frontend developer who is currently learning or sharpening your CSS skill, this article will help you understand the concept of responsive design much better.

Why is Responsive Design Important?

Responsive designs help users interact with a website quickly and keep everything simple, attention to detail, and clean. You don’t want a situation where the images present in your code are too big or too tall to fit your browser’s screen. 

In essence, responsive web design helps you create websites easily accessible by any device. A website should fit the screen of a mobile device when being viewed with a smartphone, likewise a tablet or desktop. 

 You have not done a perfect job if users who use the site you developed complain of an element or media being too large or smaller than it should be. Everything should adjust to fit on any device at all. 

That is why you should pay attention to what Media queries are and what they do, and where to apply them. With practical examples I will share in this article, you will learn how CSS Media Queries works. 

Introduction to Media Queries in CSS

Media queries change how a presentation looks in different devices’ viewports. Viewports are the areas visible to the user depending on the device the user is viewing on. Viewports vary with phones and desktop browsers.  

Media Queries allows you to display and alter the properties of HTML elements according to screen size using CSS. Some documents might appear on the desktop and will display in a different size on mobile devices. 

Also Read:  Exploring SvelteKit : A new approach to building Svelte Apps

How to write Media Queries 

The general syntax for writing media queries is as follows


@media (max-width: /* your width here */ ) {/* Your CSS Rules Here */}
 

The media query above says Media should display according to the css rules set when the device width is below or exactly a specified number of pixels wide.
Having taken note of that, if we were to instruct the body tag of an HTML document to have a background color of pink when viewed on devices lesser than 380px, the snippet to achieve that would pretty much look like this


@media (max-width: 380px ) {
/* Your CSS Rules Here */
  body {
    background-color: pink;
  }

 

CSS Media Queries in Action

Here is an example of a media query that returns the content when the device width is more than or equal to 560px:


<html>
  <head> 
    <title>
      Data Entry Website
    </title> 
  <style> 
  /* Default styling */ 
    p {
      font-size: 16px;
      color: red;
    }
  
  /* Specified Media Query styling */
  @media (min-width: 560px) {
      p { 
        font-size: 22px;
        color: green;
      }
  }
  </style>
  </head>

   <body>
  <p> I am the red text that will change to from red to green when device with width greater or exactly 560px view me <br>
You can try me on text editor
 </p>
    </body>
</html>

What the code block above declares is that devices with a width equal to or more than 560px will display the font as 22px and the color of <p> tags will change to green. 

When you view this code on a device with a screen size of lesser than 560px, the text will be red and green otherwise.

Also Read:  Tips for building production-ready applications the right way
media query gif
The result when screen width becomes smaller

I will recommend that you play around with the code by changing the width using w3school online text editor or any IDE of your choice. 
For different devices screen, you can set the selectors based on what you want making sure all screens get appropriate sizes for a truly responsive website.


Media queries can be implemented directly to an element instead of using the @media attribute, you can set values within a media tag using class as shown below.


<!-- DOCTYPE html -->
<style>
  .responsive-img {
  max-width: 100px;
  height: auto;
  }

  img {
  width: 500px;
}
</style>
<html>
    <head>
        <title>
            Data Entry Website
        </title>
    </head>
    <body>
  <img class="responsive-img" src="https://i1.wp.com/codingindian.com/wp-content/uploads/2021/10/creative-css3-tutorials.jpg?fit=1400%2C802&ssl=1" alt="CSS 3 image">

  <img src="https://i1.wp.com/codingindian.com/wp-content/uploads/2021/10/creative-css3-tutorials.jpg?fit=1400%2C802&ssl=1" alt="CSS 3 image">

    </body>
</html>

preview of media queries with just classes
Previewing the result

Conclusion

That been said, you know what media queries are in CSS and how to apply it where and when necessary when developing a website. 
In this article, you have learned that CSS Media Queries are used to define the screen size of a device or media to fit a screen depending on the device being used to view content.

Related posts
Frontend Development

Supercharging Javascript Arrays With the Spread Operator

1 Mins read
The spread operator can turn the elements of an array into elements of a function call or into elements of another array…
Frontend Development

Top Javascript frameworks for frontend development in 2022

2 Mins read
JavaScript frameworks are becoming more and more popular for frontend development. In this post, we’ll take a look at the top 10…
GeneralArticles

Understanding IPS Patching

5 Mins read
An Intrusion Prevention System (IPS) is a security mechanism that detects and prevents threats to networks. In this article, we’d take a…
Subscribe to more programming tutorials

Be the first to get notifications of byte-sized articles to make you a better programmer.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.