CSS Responsive Media Queries

In responsive web design, Media Queries are a crucial tool that allow you to apply different CSS styles to your website based on the characteristics of the user’s device or viewport. Media queries use CSS syntax and enable you to create a responsive layout that adapts to various screen sizes and devices.

Here are some common media query lists that are often used in responsive web design:

Screen Width Breakpoints:
These media queries target specific screen widths to apply different styles as the viewport size changes. This is the most common type of media query list.

css
/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575.98px) { … }

/* Small Devices (tablets, 576px – 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) { … }

/* Medium Devices (laptops, 768px – 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) { … }

/* Large Devices (desktops, 992px – 1199.98px) */
@media (min-width: 992px) and (max-width: 1199.98px) { … }

/* Extra Large Devices (large desktops, 1200px and larger) */
@media (min-width: 1200px) { … }

Orientation:
These media queries target the orientation of the device (portrait or landscape) and adjust styles accordingly.

css
/* Portrait Orientation */
@media (orientation: portrait) { … }

/* Landscape Orientation */
@media (orientation: landscape) { … }
Retina or High-DPI Displays:
These media queries target devices with high pixel density (e.g., Retina displays) to provide better quality images and graphics.

css
/* High-DPI Displays (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) { … }
Aspect Ratio:
These media queries target specific aspect ratios, useful when you want to adjust styles based on the overall shape of the viewport.

css
/* 16:9 Aspect Ratio */
@media (aspect-ratio: 16/9) { … }

/* 4:3 Aspect Ratio */
@media (aspect-ratio: 4/3) { … }
Device Features:
These media queries target specific device features, like touch capability, hover support, and more.

css
/* Touch Devices */
@media (hover: none) and (pointer: coarse) { … }

/* Devices with Hover Support */
@media (hover: hover) and (pointer: fine) { … }
Combining Conditions:
You can also combine multiple conditions in a single media query to create more specific targeting.

css
/* Example: Targeting Tablets in Portrait Mode */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) { … }
Remember that these are just examples of common media query lists. Depending on your specific design needs, you can create custom media queries to fine-tune the responsiveness of your website. Always test your design on different devices and screen sizes to ensure it looks and functions as intended.

Mostly used Responsive Website Media Query

1. Mobile First Approach:

Using a mobile-first approach involves writing your base styles for mobile devices and then using media queries to enhance the layout for larger screens. This ensures a smooth experience on small devices and progressively enhances on larger screens.

2. Flexible Grids:

Adjusting grid layouts using media queries can optimize the layout for different screen sizes. For example, you might change the number of columns in your grid to ensure content remains well-organized.

3. Font and Text Adjustments:

Media queries can help maintain readability by adjusting font sizes and line heights based on screen size.

4. Images and Media:

Media queries can be used to serve different image sizes based on the user’s device, improving loading times and visual quality.

5. Navigation and Menu Adjustments:

On smaller screens, navigation menus might need to be collapsed into a mobile-friendly format.

6. Hide/Show Elements:

Media queries can be used to hide or show certain elements based on screen size. This is helpful for displaying content in a more streamlined way on smaller screens.

7. Flexible Typography:

Media queries can be used to adjust typography properties like line length, letter spacing, and font styles for different screen sizes.

Remember that these are just examples, and media queries can be customized to suit your specific design needs. Always prioritize user experience and test your responsive design on various devices and screen sizes to ensure it works as intended.

Some CSS Media Queries now that capture different devices and screen dimensions:

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}