Responsive webdesign
Responsiveness is the process of making your web pages look good on any screen size (view-port as they call it). This implies that all the components that make up your web pages are well arranged, no matter the size of the screen on which they are rendered.
Media queries
Media queries use different screen breakpoints to change CSS declarations. In essence, their purpose is to change the look of components of the application when accessed on mobile phones, tablets, desktops, etc.
Before you add breakpoints to your CSS, it's worth adding a meta tag for the viewport letting the browser know the website is designed for mobile as well. This also removes a 300 millisecond delay for touch input:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For smaller devices like smartphones we're only specifying the max-width on the media query statement. When developing mobile-first, this media query can be excluded as it would be the default styling:
@media screen and (max-width: 479px) {
p {
font-size: 16px;
}
}
Small devices like portrait tablets, large phones etc (480px min, 767px max):
@media screen and (min-width: 480px) and (max-width: 767px)
Medium devices like landscape tablets (768px min, 1023px max):
@media screen and (min-width: 768px) and (max-width: 1023px)
Large/extra large devices like desktops, laptops (1024px min and above):
@media screen and (min-width: 1024px)
Exercise
Here's an exercise you can do to familiarize yourself with media queries.
When you're finished, check out this result and compare your methods!