"I am Saqib Jahangir. A passionate vlogger, software engineer, trainer and avid traveler with a deep love for exploring the hidden gems of our beautiful planet. With a strong foundation in Application Development, Application Architecture & Database Design and Product Management, I bring over a decade of hands-on experience building secure, scalable, and resilient web applications for a diverse range of industries."

Media Queries and Responsive Design

With the vast variety of devices and screen sizes today, creating websites that look great on all of them is essential. Responsive design ensures your site adapts fluidly to different screen widths, orientations, and resolutions. The key to this adaptability lies in CSS Media Queries.

What Are Media Queries?

Media queries allow you to apply different CSS rules based on the characteristics of the user’s device or viewport. This means you can change the layout, font size, colors, and more depending on whether someone is using a phone, tablet, desktop, or even printing the page.

Basic Syntax

@media (condition) {
  /* CSS rules here */
}

For example:

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

This changes the body’s background color to light blue when the screen width is 600px or less.

Common Media Features

·         width / max-width / min-width: Target screen widths.

·         height / max-height / min-height: Target screen heights.

·         orientation: Detect if device is in portrait or landscape.

·         resolution: Target device pixel density.

·         aspect-ratio: Match specific screen proportions.

Responsive Design Techniques

·         Fluid Grids: Use relative units like percentages or fr in grids instead of fixed pixels.

·         Flexible Images: Make images scale with max-width set to 100%.

·         Breakpoints: Set media queries at specific screen widths to adjust layout and typography.

·         Mobile-First Approach: Write styles for small screens first, then add media queries for larger screens.

Example: Responsive Layout

.container {
  display: flex;
  flex-direction: row;
}
 
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

This switches a horizontal layout to a vertical one on tablets and smaller devices.


Popular Posts

Operators (Arithmetic, Comparison, Logical)

  Operators in PHP are symbols that perform operations on variables and values. They are essential for performing calculations, comparing values, and making logical decisions in your code. PHP supports several types of operators, including arithmetic, comparison, and logical operators. Arithmetic Operators Arithmetic operators are used to perform basic mathematical operations. Example: <?php $a = 10; $b = 3;   echo $a + $b; // 13 echo $a - $b; // 7 echo $a * $b; // 30 echo $a / $b; // 3.3333 echo $a % $b; // 1 (modulus) echo $a ** $b; // 1000 (exponentiation) ?> Comparison Operators Comparison operators are used to compare two values. They return true or false . Example: <?php $x = 5; $y = 10;   var_dump($x == $y);   // false var_dump($x != $y);   // true var_dump($x === $y); // false (checks value and type) var_dump($x !== $y); // true var_dump($x > $y);    // false var_dum...
Read more

Functions (Built-in & User-defined)

  Functions in PHP are blocks of code designed to perform a specific task. They help make code reusable, organized, and easier to maintain. PHP provides built-in functions for common tasks, and also allows you to create your own user-defined functions . Built-in Functions PHP has hundreds of built-in functions that perform predefined operations such as string manipulation, mathematical calculations, and array handling. Example (Built-in Functions): <?php // String length echo strlen("Hello World"); // Outputs: 11   // Find maximum value in an array echo max(10, 20, 30); // Outputs: 30   // Convert string to uppercase echo strtoupper("php is awesome"); // Outputs: PHP IS AWESOME ?> User-defined Functions You can create your own functions to execute code whenever needed. This helps reduce repetition and makes programs easier to read. Syntax: function functionName($parameter1, $parameter2) {     // Code to...
Read more