Media Queries

• They are used to add styles at any viewport or screen size

• If I am going for a party with a budget of 200, can I spend 160? If yes then that’s what we do with max-width

/* At screens 718 or lower */
@media screen and (max-width: 718px){
	header {
		flex-direction: column;
	}
}

Auto Dark Theme

• Using media query we can also set default dark or light theme depending on user’s browser preference

@media (prefers-color-scheme: dark){
}

Responsiveness

Different Viewports