Lartzmanuel• 190
@Lartzmanuel
Posted
Media queries in CSS are used to apply different styles for different devices or screen sizes. They allow you to create responsive designs that adapt to various devices, such as desktops, tablets, and mobile phones. Here's a general structure for writing media queries:
@media only screen and (max-width: 600px) {
/* Styles for small screens */
}
/* Media query for medium screens (e.g., tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
/* Styles for medium screens */
}
/* Media query for large screens (e.g., desktops) */
@media only screen and (min-width: 1025px) {
/* Styles for large screens */
}
If you use a mobile workflow first, note that the initial styles you write before any media query will be for mobile screens. You can read more about media queries here
I hope I helped :)
1
