CSS Media Queries Lesson - 40

CSS media queries allow you to apply styles to your HTML elements based on the characteristics of the device or viewport where the content is being displayed. Media queries are commonly used in responsive web design to create layouts that adapt to different screen sizes and devices. They enable you to set specific CSS rules for specific conditions, such as different screen widths, heights, orientations, or device types.
The basic syntax of a media query looks like this:
@media media_type and (media_feature: value) {
/* CSS rules to apply */
}
@media: This is the keyword that defines the start of the media query.
media_type: Specifies the type of media the query applies to, such as screen, print, speech, etc.
media_feature: Describes the specific characteristic being targeted, such as width, height, orientation, min-width, max-width, etc.
value: The value against which the media feature is tested.
Here's an example of a media query that applies styles when the viewport width is 768 pixels or less:
@media screen and (max-width: 768px) {
/* CSS rules to apply when the viewport width is 768px or less */
}
In this example, any CSS rules placed inside the media query block will only take effect when the viewport width is 768 pixels or less. You can also combine multiple media features and values to create more complex conditions. For instance:
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* CSS rules to apply when the viewport width is between 768px and 1024px */
}
Media queries are crucial for creating responsive web designs that provide a seamless user experience across various devices and screen sizes. By adjusting the styles based on the characteristics of the user's device, you can optimize the layout and usability of your website or web application.