Overview of Media-Queries in CSS(CSS3)

The CSS Media Query gives you a way to apply CSS only when the browser and device environment matches a rule that you specify the "viewport.is". Firends, whenever you see the BOILERPLATE-CODE for STARTING-HTML-DOCUMENT in VS-CODE, you all see the below HTML-DOCUMENT-STRUCTURE that is,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- All visible content goes here -->
    <h1>Hello World!</h1>
    <script src="script.js"></script>
</body>
</html>

This boilerplate includes essential elements:

<!DOCTYPE html>: Declares the document type as HTML5 to prevent "quirks mode" in browsers.
<html lang="en">: The root element, specifying the language of the content.
<head>: Contains meta-information not displayed on the page, like the title and links to stylesheets.
<meta charset="UTF-8">: Sets character encoding for correct text display.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures responsive design settings for different devices.
<title>Webpage Title</title>: Sets the text appearing in the browser tab.
<link rel="stylesheet" href="style.css">: Links an external CSS file for styling.
<body>: Contains all visible content of the webpage.
<script src="script.js"></script>: Links an external JavaScript file for interactivity.

So, "<meta name="viewport" content="width=device-width, initial-scale=1.0">" is the main reason that your webpage becomes responsive and you can use media-query as-per your need. Means, as-per the size of the device you apply your media-query and for the sake of your device-size, you should knew that the size depends on pixels-resolution with screen-size that is,

0-480 pixels(px) for samller smartphones;
481-768 pixels(px) for tablets or larger smartphones;
769-1279 pixels(px) for laptops or latger-tablets in landscape-mode or small-desktops;
1280+ pixels(px) larger-desktops or monitors.

You, see the ranges, yes you can modify the ranges according to the responsive appearences as-per the feedback you got from your client(s).

Now, for the sake of using media-queries, you can see below points which allows you to decide ranges as-per your electronic device's screen-size that is,

Ranges should be <=480-pixels;
Ranges should be <=768-pixels;
Ranges should be <=1024-pixels;
Ranges should be <= 1600-pixels and;
Range would be > 1600-pixels as so-on.
Also, the concept of MINIMUM-WIDTH and MAXIMUM-WIDTH also plays an important role while using media queries that is, in the range 0px to 2000+px, you can decide as-per your convenience the min-width and max-width that is, for 0px to 800px you can set the max-width property and for 1600px to 2000+px you can set max-width property.
Also, the meta "<meta name="viewport" content="width=device-width, initial-scale=1.0">" tag is essential for creating responsive, mobile-friendly websites. It tells mobile browsers to set the viewport width to the physical device width and sets the initial zoom level to 100%, preventing browsers from assuming a desktop-sized layout and shrinking content.

Key Components & Details

Location: Placed inside the <head> section of an HTML document.
width=device-width: Forces the page width to match the screen's width in CSS pixels, ensuring adaptability across different device sizes (phones, tablets).
initial-scale=1.0: Defines the initial zoom level when the page loads, setting a 1:1 pixel ratio (1 CSS pixel = 1 viewport pixel).
Purpose: Crucial for user experience on mobile, allowing proper scaling and preventing horizontal scrolling.

Other Possible Attributes (Less Common)

maximum-scale: Sets the maximum zoom level.
minimum-scale: Sets the minimum zoom level.
user-scalable=no: Prevents users from zooming, which is generally advised against for accessibility.

Breakdown of the Attributes

name="viewport": Tells the browser that this meta tag contains instructions for the viewport—the user's visible area of a web page.
width=device-width: Sets the width of the page to match the screen width of the device in CSS pixels. Without this, mobile browsers typically default to a "virtual" width of 980px and scale the page down, making text tiny and difficult to read.
initial-scale=1.0: Sets the initial zoom level to 100% when the page first loads. This establishes a 1:1 relationship between CSS pixels and device-independent pixels.

Why It Is Essential

Prevents Mobile Distortions: It stops browsers from "squeezing" a desktop-sized layout into a small mobile screen.
Enables Media Queries: CSS media queries rely on the viewport width to apply different styles. Without this tag, media queries may not trigger correctly on mobile devices.
SEO Benefit: While not a direct ranking factor, Google uses mobile-first indexing. Sites without proper viewport settings provide poor user experience, which can negatively impact search rankings.
Orientation Handling: It ensures the page displays correctly when a user rotates their device from portrait to landscape mode.

Additional Optional Properties

Beyond the standard tag, you can add other directives to the content attribute:

user-scalable=yes/no: Controls whether users can zoom in or out. Setting this to no is generally discouraged as it hurts accessibility.
maximum-scale / minimum-scale: Sets the limits for how much a user can zoom.
interactive-widget: A newer property (e.g., resizes-visual) that specifies how virtual keyboards affect the viewport.

Without this tag, mobile devices may render the page at a default width (often around 980 pixels) and scale it down, making text too small to read.

Now, how to write the media-queries inside your CSS-FILE, see below

@media(max-width:768px){box{display:none}} and/or @media(max-width:768px) and (min-width: 999px){box{display:none}}

According to that, for Desktop: @media screen and (min-width: 1024px), for Tablet: @media screen and (min-width: 768px) and (max-width: 1023px) and for Smartphone: @media screen and (max-width: 767px).

Now, from here onwards, I'm also discussing the three-varieties of H.T.M.L.-Elements which is BLOCK, INLINE-BLOCK AND INLINE that is,

BLOCK-LEVEL HTML-ELEMENTS and BLOCK-LEVEL RENDERING OF HTML-ELEMENTS ARE MOSTLY SUITED FOR MOBILE-PHONES DISPLAY becuase for mobile-screens block-rendering is the perfect-way to display your webpage(s).
INLINE-BLOCK LEVEL HTML-ELEMENTS and INLINE-BLOCK LEVEL RENDERING OF HTML-ELEMENTS ARE MOSTLY SUITED FOR TABLETS-PORTRAIT DISPLAY and TABLETS-LANDSCAPE DISPLAY becuase for tablets-screens inline-block-rendering is the perfect-way to display your webpage(s).
INLINE-LEVEL HTML-ELEMENTS MOSTLY SUITED FOR DESKTOP-DISPLAY or FOR MORE BIGGER-SCREENS DISPLAY becuase for desktops-screens inline-block-rendering or inline-rendering is the perfect-way to display your webpage(s).

Code

Another BOILERPLATE-CODE for STARTING-HTML-DOCUMENT in VS-CODE with EXTERNAL-LINKS overview and you all see the below the said HTML-DOCUMENT-STRUCTURE that is,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <!-- SEO Meta Tags -->
    <title>Complete HTML5 Boilerplate</title>


    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com">

    <!-- Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com">

    <!-- Animate.css for animations -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com">


    <meta name="description" content="A complete HTML5 boilerplate with CDN links.">
    <meta name="keywords" content="HTML5, Boilerplate, CSS, JS, CDN">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- CSS External Links (CDN) -->
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <style>
        /* Inline CSS for quick styles */
        body { font-family: sans-serif; }
    </style>
</head>
<body>

    <h1 class="text-center mt-5">Hello, World!</h1>

    <!-- JavaScript External Links (CDN) -->
    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery 3.7.0 (Optional) -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <!-- Custom JS -->


    <div class="container py-5 text-center">
      <h1 class="animate__animated animate__fadeInDown">Hello, World! <i class="fas fa-rocket"></i></h1>
        <p class="lead">Ready to build something awesome.</p>
        <button id="alertBtn" class="btn btn-primary">Click Me</button>
    </div>

    <!-- jQuery (Optional, but often used with legacy plugins) -->
    <script src="https://code.jquery.com"></script>

    <!-- Bootstrap 5 Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net"></script>

    <!-- Axios for API calls -->
    <script src="https://cdn.jsdelivr.net"></script>

    <!-- GSAP for advanced animations -->
    <script src="https://cdnjs.cloudflare.com"></script>

    <script>
        // Quick check to see if everything is firing
        document.getElementById('alertBtn').addEventListener('click', () => {
            alert('Boilerplate is live!');
        });
    </script>
    <script src="script.js"></script>
</body>
</html>

Breakdown of Included Elements:


	<!DOCTYPE html>: Declares the document as HTML5.
	<meta charset="UTF-8">: Ensures proper rendering of characters.
	viewport Meta: Ensures responsiveness on mobile devices.
	X-UA-Compatible: Ensures compatibility with Internet Explorer.
	CDN Links: Included Bootstrap 5 (UI), Font Awesome (Icons), and jQuery (Scripting).
	<body>: Contains the content to be displayed.

Chapters

Overview of Media-Queries in CSS(CSS3)

Select Chapter