CSS Media Queries are a technique used to apply styles based on the conditions of the device or viewport. They enable you to create styles that adjust dynamically depending on various factors such as screen size, orientation, resolution, and more. This makes it possible to create responsive layouts that adapt to different devices and user environments.
Syntax
@media mediaType and (condition) { /* CSS rules */ }
@media: The keyword used to define a media query.
mediaType: The type of media, such as screen, print, etc. (Optional in modern usage).
condition: The condition or feature to evaluate, such as min-width, max-width, orientation, etc.
CSS rules: The styles to apply when the condition is met.
Common Media Query Conditions
min-width: Applies styles when the viewport width is at least a specified value.
max-width: Applies styles when the viewport width is no more than a specified value.
orientation: Applies styles based on the device's orientation, such as portrait or landscape.
