#css #frontend #web-development

CSS Breakpoints

• Media queries for different viewport widths

Mobile first responsive design

• Use min-width for media queries
• First design for smaller screen like for a mobile
• Then use a media query with the next breakpoint for a tables lets say and then style the website for the tablet

// mobile
body {
	padding: 1rem;
}

// tablet
@media (min-width: 768px) {
	body {
		padding: 2rem;
	}
}

Desktop first responsive design

• Use max-width for media queries
• First design for larger screen like for the desktop
• Then use a media query with the next breakpoint for a tablet let's say and they sytle the website for the table

// desktop
body {
	padding: 3rem;
}

// tablet
@media (max-width: 768px) {
	body {
		padding: 2rem;
	}
}