Media queries are a fundamental part of responsive web design They allow you to apply different styles for different screen sizes and device types They are defined using @media rule in CSS media types: all → applies for all devices(default), print → styles for print preview mode screen → styles for screen devices in media rules you can also use logical operators → and, not, only and or @media screen and (min-width: 780px) → for screen and min width 780px @media print → media query for print version
b - media queries common descriptors
width → Minimum and maximum width of the viewport. height → Minimum and maximum height of the viewport. aspect-ratio → Aspect ratio of the viewport. orientation → Orientation (portrait or landscape). device-width, device-height → Dimensions of the device screen. color → Number of bits per color component in the output device. color-index → Maximum number of colors that can be addressed on the output device. monochrome → Number of shades of gray in the output device. resolution → Minimum and maximum resolution (dots per inch) of the output device. scan → Scan type (progressive or interlaced). hover → Whether hover capabilities are available. @media (orientation: landscape) → only for landscape orientation @media (min-width: 768px) and (max-width: 1024px) → for width between 768px and 1024px @media not (hover: hover) → for non-touch devices
c - media queries best practices
Mobile First → Start with the smallest screen and build up to larger ones Avoid Overusing Media Queries → Too many can slow down your site... ...Aim for a breakpoint every 50-70 pixels or so. Use Relative Units → Use relative units like em, rem, % instead of fixed units... ...like pixels to ensure consistency across different devices. Test Thoroughly → Test your designs on various devices and screen sizes to ensure they look good everywhere. Just remember that media queries are a powerful tool in CSS... for creating responsive web design