Mastering MediaQuery : Building Truly Responsive Websites

What is Media Query?

Responsive webpages are made using the CSS notion of Media Query. Developers can build responsive websites based on screen size by using a set of rules called media queries. Utilizing different criteria, including screen size, width, height, and orientation, CSS mediaquery is used to build responsive websites for a variety of devices.

Basic Syntax

What is a Responsive Website?

A responsive website is a style of website where the content is adjusted to fit different screen sizes and devices. A responsive website provides a great user experience.

Exploring MediaQuery Rule

Early in the year 2000, websites were static and mostly created for large-screen devices, but when the contemporary era of technology arrived and new smart gadgets were created, their screen sizes also shrunk. when a result, creating the same website for various devices with various screen sizes was a bit challenging. We therefore defined the content width and height in accordance with the various screen widths using the @media’ property to solve that issue.

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

Understanding the Syntax:

@media media-type and (media-feature) {
  /* CSS rules to be applied when the media feature matches */
}

Let’s breakdown the syntax for better understanding:

1. @media : This keyword indicates the start of the media query.
2. media-type: The media query’s target media type is specified here. The following values are possible for it:
   1. all: This media-type query will apply to all types of devices.
   2. screen: This media query applies based on the screen sizes.
      for example: desktop,laptop,tablet,mobile.
3.  and:This media query’s property is used to set up the requirement that each condition be satisfied.
4. Media-feature:We will define many media criteria in the media feature, including screen orientation, height, width, max-width, and min-width.

Now let’s understand the media query in more detail with the help of examples . creating website a for different screen size .

Example1:

We’ll build a webpage with a basic HTML structure, and then using the CSS media query property, we will set the max-width to 600 px. Using the media query condition, changes specified under the media query will be applied as the screen size changes.

@media (max-width: 600px) {
  body {
    background-color: red;
  }
  h1{
    color: White;
  }
}

See the Pen
Media query 1 by Arun (@arun020)
on CodePen.

Example2:

If the size of the screen is within the scope of the specified media rule, we will use a variety of screen sizes in the second illustration. Consider a scenario in which the minimum and maximum screen sizes are “600px” and “800px, respectively.” A background image will replace a solid background if the screen size of any device falls between the specified boundaries.

@media (min-width: 600px) and (max-width: 800px) {
  body {
    background-image: url('https://img.freepik.com/free-photo/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg?w=2000')
  }
  H1{
    color:white;
  }
}

To make a website responsive for the multiple devices present in the market today. We have provided you with the screen sizes of multiple devices that will help you make the website responsive.

• Mobile-devices: 320px-480px
• Tablets: 481px-768px
• Laptops: 769px – 1024px
• Desktops: 1025px-1200px

Video Preview:

Summary

A crucial component for a responsive design is CSS media queries, which allow developers to use various styles depending on the browser’s specifications like width, height, and screen resolution. Websites may adjust content of the website visitors using different devices by employing responsive design strategies, which encourage a consistent and pleasurable browsing experience.

If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: CodewithRandom
Author: Arun
CodeBy: Arun