What’s the difference between min-width and max-width in media queries?
Difference Between min-width and max-width in Media Queries
The min-width and max-width properties in CSS media queries define the range of viewport sizes where specific styles should apply. They are essential for creating responsive layouts that adapt to different devices.
Key Differences
min-widthapplies styles when the viewport is equal to or wider than the specified width — typically used in mobile-first design.max-widthapplies styles when the viewport is equal to or narrower than the specified width — typically used in desktop-first design.You can combine them to target specific ranges, such as tablets or mid-sized devices.
Example: Using min-width and max-width